Question

我有关于滚石乐队的这个非常粗糙的粉丝。它上面有一个图像库，我们发布了所有石头的LP封面。专辑。每个图像都保存在一个div中，以指示读者，如果点击它们，它们将被重定向到全尺寸图像

这些div会自动占用自己的行，而不是彼此相邻。怎么会有人这样做？

这里是代码

<a href="selftitled.html"><div class="imgWrap">
<img src="images/albums/selftitled.jpg" width="250" 
height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>
<a href="12x5.html"><div class="imgWrap"><img src="images/albums/12x5.jpg" width="250" height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>
<a href="now.html"><div class="imgWrap"><img src="images/albums/now.jpg" width="250" height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>

Answer 1

默认情况下，Div是块元素，它占用页面的整个宽度。要让他们只占用他们需要的空间，您可以添加到imgWrap班级：

display: inline-block

这将使它们能够在同一条线上显示。我建议这是一个比浮动更好的解决方案，因为浮动会从正常的文档流中删除元素，并可能导致其他显示问题。其他内容不一定适当地绕过它。将它们显示为inline-block会使它们保持正常的文档流程，因此其他内容会自动围绕它们自行排列。

Answer 2

添加一个将每个div设置为的类：

float：left;

这会导致元素在一行中彼此相邻。

http://www.w3schools.com/cssref/pr_class_float.asp

＆＃13;

.floatleft {
  float: left;
}

＆＃13;

<a href="selftitled.html">
  <div class="imgWrap floatleft">
    <img src="images/albums/selftitled.jpg" width="250" height="250">
    <p class="imgDescription">CLICK
      <br>TO
      <br>ENLARGE</p>
</a>
</div>
<a href="12x5.html">
  <div class="imgWrap floatleft">
    <img src="images/albums/12x5.jpg" width="250" height="250">
    <p class="imgDescription">CLICK
      <br>TO
      <br>ENLARGE</p>
</a>
</div>
<a href="now.html">
  <div class="imgWrap floatleft">
    <img src="images/albums/now.jpg" width="250" height="250">
    <p class="imgDescription">CLICK
      <

＆＃13;

Answer 3

第三个答案，将每个div放在同一行中的一列表中。

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        <a href="selftitled.html">
          <div class="imgWrap floatleft">
            <img src="images/albums/selftitled.jpg" width="250" height="250">
            <p class="imgDescription">CLICK
              <br>TO
              <br>ENLARGE</p>

          </div>
        </a>
      </td>
      <td>
        <a href="12x5.html">
          <div class="imgWrap floatleft">
            <img src="images/albums/12x5.jpg" width="250" height="250">
            <p class="imgDescription">CLICK
              <br>TO
              <br>ENLARGE</p>
          </div>
        </a>
      </td>
      <td>
        <a href="12x5.html">
          <div class="imgWrap floatleft">
            <img src="images/albums/12x5.jpg" width="250" height="250">
            <p class="imgDescription">CLICK
              <br>TO
              <br>ENLARGE</p>
          </div>
        </a>
      </td>
    </tr>
  </table>
</body>

</html>

同一行上有多个div

3 个答案: