Question

我在一个页面上有9张图片，前6张图片很好，但最后3张图片太低了，需要抬起以便它们与中间图像保持一致（图4-6），请参阅图片以便澄清

http://s29.postimg.org/5jejyjgrr/tiles.jpg

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>

Answer 1

对你的CSS做一点改动添加一个浮动：左;导航

nav img {
  display: block;
  float:left
}

还为div创建一个css

div{
  float:right;
}

刷新你的页面！完成！

Answer 2

对于您尝试创建的布局类型，您需要分别对float: left和float: right使用nav和div。这是一个演示（查看整页）：

＆＃13;

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;
}
nav {
  float: left;
  overflow: hidden;
}
div {
  float: right;
  overflow: hidden;
}

＆＃13;

<header>
  <img src="http://placehold.it/350x150" alt="purple space" height="250" width="250">
  <img src="http://placehold.it/350x150" alt="red space 2" height="250" width="250">
  <img src="http://placehold.it/350x150" alt="blue space3" height="250" width="250">
  <br>
  <br>
  <br>
  <br>
</header>
<nav>
  <img src="http://placehold.it/350x150" alt="purple space 3" height="250" width="250">
  <img src="http://placehold.it/350x150" alt="red space" height="250" width="250">
  <img src="http://placehold.it/350x150" alt="blue space" height="250" width="250">
</nav>
<div>
  <img src="http://placehold.it/350x150" alt="blue space 2" height="250" width="250">
  <img src="http://placehold.it/350x150" alt="red space 3" height="250" width="250">
  <img src="http://placehold.it/350x150" alt="purple space 2" height="250" width="250">
</div>

＆＃13;

<强> jsFiddle Demo

使用CSS定位图像（打破默认框/空格）

2 个答案: