CSS如何使元素垂直显示而非水平排列

Question

CSS如何使元素垂直显示而非水平排列

htmlcss

16

我有一些元素包含在一个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>

- JackRoster

所以你想要它们1、3，然后下一行是2、4并重复吗？ - Class

@类 Yep，垂直向下然后向上 - JackRoster

3个回答

0

我做了一些研究，发现column-count可以在你使用现代浏览器时起作用。

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

你可能想要调整column-count，但它应该适用于你的目的，同样你可能想要调整column-width以实现你想要的期望结果。

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

jsFiddle示例

支持column-count的浏览器

A List Apart：多列

你可能需要为旧版浏览器实现js/html条件检查以创建相同的效果

- Class

0

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

这将使图像一个接一个地排列。

.box1 img {display:block;}

- MaxOvrdrv

我尝试了你的答案，但它所做的是将图像放大到容器的大小。 - JackRoster

display:block; 应该将它们放在彼此下面...请参见这里：http://dustwell.com/div-span-inline-block.html - MaxOvrdrv

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dsundy · Accepted Answer

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

解释:

如果元素是内联的，它们会自然流动并且会一直在同一行上，直到需要换行。如果元素是块级的，它们将始终出现在前一个元素下面。另一个选项是使元素浮动，但如果有足够的空间，它仍将出现在前一个元素旁边，而不是下面。

这就是为什么你需要调整你的标记来将你想要在垂直线上的元素分组，然后将下一组浮动在其旁边的原因。