Question

我有包含在div中的元素。元素在div内部以水平方向显示。问题是，我无法弄清楚如何垂直向下显示元素。我做了一些研究，一个解决方案是使用vertical-align但它似乎不起作用。

这是我想要完成的一个例子

http://s9.postimg.org/6i34jzazz/save.jpg

我的CSS

  .container {height:500px; width: 700px; background-color:#00B358}

我的HTML

  <html>
  <head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/navigation.css">
  </head>

  <div class="container ">
  <img border="0" src="download.jpg" alt="Pulpit rock" width="304" height="228">
  <img border="0" src="1.jpg" alt="Pulpit rock" width="304" height="228">
  <img border="0" src="2.jpg" alt="Pulpit rock" width="304" height="228">
  </div>

Answer 1

我认为如果不重新组织标记，您将能够实现您的目标。您可能必须将div放在列容器中（至少在Flexbox被广泛使用之前！）。

快速示例：

HTML：

<div class="container">
    <div class="col-1">
        <img border="0" src="download.jpg" alt="Pulpit rock">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
    <div class="col-2">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
</div>

CSS：

img {
    display: block;
}

.container > div {
    float: left;
}

阐释：

如果元素是内联的，则自然流将在彼此旁边出现，直到需要换行。如果元素是块级别，则它们将始终显示在前一个元素下面。另一种选择是浮动元素，但如果有空间，而不是下面，它将再次出现在前一个元素旁边。

这就是为什么你必须调整你的标记以将你想要的元素组合在一起 - 然后将下一组浮动在它旁边。

Answer 2

您需要在div中设置图像以显示：block;不确定下面是否是“class”中“元素类型”的正确格式，但它应该指向正确的方向。

这会将图像放在另一个之下。

.box1 img {display：block;}

Answer 3

我做了一些研究，发现如果你有一个现代化的浏览器，column-count可行。

-moz-column-count
-webkit-column-count
column-count

你可能想要摆弄column-count，但它应该适用于你的目的，你可能想要弄乱column-width以达到你想要的预期结果。

-moz-column-width
-webkit-column-width
column-width

jsFiddle example

browsers that support column-count

A List Apart: Multi-Column

您可能必须对旧浏览器实施js / html条件检查以创建相同的效果

CSS垂直向下显示元素而不是水平直线

3 个答案:

快速示例：

阐释：