logo标签列表

同一行上有多个div元素

htmlcss
5
我有一个非常棒的滚石粉丝网站。其中有一张图片库，我们会在上面发布滚石乐队所有专辑的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>
你听说过浮点数吗？ - Krisztián Balla
是的，我听说过浮点数。 - bill lcinton
1
请注意，您的 HTML 代码无效。您在关闭内部标签之前先关闭了一些外部标签。 - j08691
3个回答
5
默认情况下，Div是块级元素，占据整个页面的宽度。为了使它们仅占用所需的空间，您可以在类中添加以下内容：
display: inline-block

这将使它们能够在同一行上显示。

我建议这比浮动更好，因为浮动会从正常文档流中移除元素，并可能导致其他显示问题。其他内容不一定会正确地围绕它流动。将它们显示为inline-block可以保持它们在正常文档流中，因此其他内容会自动正确地排列。

2

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

float: left;

这会使元素在一行中并排放置。

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

.floatleft {
  float: left;
}
<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
      <

-1

第三个答案是，将每个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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接