14

我有包裹在 div 内的元素。元素在 div 内以水平方向显示。问题是，我不知道如何垂直向下显示元素。我做了一些研究，一个解决方案是使用垂直对齐，但它似乎不起作用。

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

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>
4

3 回答 3

9

我认为如果不重新组织标记，您将无法实现您想要做的事情。您可能必须将 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;
}

解释：

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

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

于 2013-04-05T03:01:34.757 回答
0

您需要将 div 中的图像设置为 display:block; 不确定下面这是否是“类”中“元素类型”的正确格式，但它应该为您指明正确的方向。

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

.box1 img {显示：块；}

于 2013-04-05T02:58:52.440 回答
0

我做了一些研究，发现column-count如果你有一个现代浏览器，哪些是有效的

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

您可能想摆弄column-count，但它应该可以满足您的目的，并且您可能也想弄乱它column-width以实现所需的结果。

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

jsFiddle 示例

支持列数的浏览器

A List Apart：多列

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

于 2013-04-05T04:22:31.043 回答