Html 使用CSS定位图像（默认框/空白）_Html_Css_Image

Html 使用CSS定位图像（默认框/空白）

html css image

Html 使用CSS定位图像（默认框/空白）,html,css,image,Html,Css,Image,我在一页上有9张图片，前6张很好，但后3张太低，需要提升，以便与中间的图片（图片4-6）平齐，请参见图片以了解详情 CSS： body { margin: 0px; text-align: center; } header img { display: inline; margin-right: -5px; } nav img { display: block; } div img { display: block; float: right; clear

我在一页上有9张图片，前6张很好，但后3张太低，需要提升，以便与中间的图片（图片4-6）平齐，请参见图片以了解详情

CSS：

body {
  margin: 0px;
  text-align: center;
}

header img {
  display: inline;
  margin-right: -5px;
}

nav img {
  display: block;
}

div img {
  display: block;
  float: right;
  clear: right;
}

HTML：

<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>Space Shots</title>
</head>

<body>
  <header>
    <img src="/images/spaceshots/purple-space.jpg" alt="purple space" height="250" width="250">
    <img src="/images/spaceshots/red-space2.jpg" alt="red space 2" height="250" width="250">
    <img src="/images/spaceshots/blue-space3.jpg" alt="blue space3" height="250" width="250">
    <br><br><br><br>
  </header>
  <nav>
    <img src="/images/spaceshots/purple-space3.jpg" alt="purple space 3" height="250" width="250">
    <img src="/images/spaceshots/red-space.jpg" alt="red space" height="250" width="250">
    <img src="/images/spaceshots/blue-space.jpg" alt="blue space" height="250" width="250">
  </nav>
  <div>
    <img src="/images/spaceshots/blue-space2.jpg" alt="blue space 2" height="250" width="250">
    <img src="/images/spaceshots/red-space3.jpg" alt="red space 3" height="250" width="250">
    <img src="/images/spaceshots/purple-space2.jpg" alt="purple space 2" height="250" width="250">
  </div>
</body>

<html>


太空拍摄

对于您试图创建的布局类型，您需要分别使用

浮动：左

和

浮动：右

用于

导航

和

div

。这是一个演示（以整页形式查看）：

正文{
边际：0px；
文本对齐：居中；
}
收割台img{
显示：内联；
右边距：-5px；
}
导航img{
显示：块；
}
部门经理{
显示：块；
浮动：对；
清楚:对,；
}
导航{
浮动：左；
溢出：隐藏；
}
div{
浮动：对；
溢出：隐藏；
}

对css稍作修改添加一个浮动：左；导航

nav img {
  display: block;
  float:left
}

还要为div创建一个css

div{
  float:right;
}

刷新你的页面！完成了