Html CSS 垂直向下而不是水平直线显示元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15825118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS displaying elements vertically down instead of hortizontal straight
提问by HymanRoster
I have elements which are wrapped inside a div . The elements are displayed in a horizontal direction inside the div. The problem is , I can't figure out how to display the elements vertically down direction. I done some research and one solution was to use vertical-align but it doesn't seem to work.
我有包含在 div 中的元素。元素在 div 内以水平方向显示。问题是，我不知道如何垂直向下显示元素。我做了一些研究，一种解决方案是使用 vertical-align 但它似乎不起作用。
Here an example of what I"m trying to accomplish
这是我正在努力完成的一个例子
http://s9.postimg.org/6i34jzazz/save.jpg
http://s9.postimg.org/6i34jzazz/save.jpg
My CSS
我的 CSS
.container {height:500px; width: 700px; background-color:#00B358}
My HTML
我的 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>
采纳答案by dsundy
I don't think you will be able to achieve what you are trying to do without re-organizing your markup. You will likely have to put your divs in column containers (at least until flexbox is widely used!).
我认为如果不重新组织标记，您将无法实现您想要做的事情。您可能不得不将 div 放在列容器中（至少在 flexbox 被广泛使用之前！）。
Quick Example:
快速示例：
HTML:
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:
CSS：
img {
display: block;
}
.container > div {
float: left;
}
Explaination:
说明：
The natural flow, if elements are inline, is to appear beside one another until a line break is needed. If elements are block level they will always appear below the former element. The other option is to float the elements, but again it will appear beside the former element if there is room, not below.
如果元素是内联的，自然的流程是彼此并排出现，直到需要换行为止。如果元素是块级的，它们将始终出现在前一个元素的下方。另一种选择是浮动元素，但如果有空间，它将再次出现在前一个元素旁边，而不是下方。
That's why you would have to adjust your markup to group the elements that you want in a vertical line together--then float the next group beside it.
这就是为什么您必须调整标记以将您想要的元素组合在一条垂直线上——然后将下一组浮动到它旁边。
回答by Class
I did some research and found column-countwhich works if you have a modern browser
我做了一些研究，发现column-count如果你有一个现代浏览器，哪个有效
-moz-column-count
-webkit-column-count
column-count
you might want to fiddle with the column-count, but it should work for your purpose, as well you might want to mess with column-widthto achieve the desired outcome you want.
您可能想要摆弄column-count，但它应该适合您的目的，并且您可能想要弄乱column-width以实现您想要的预期结果。
-moz-column-width
-webkit-column-width
column-width
browsers that support column-count
you might have to implement a js/html conditional check for older browsers to create the same effect
您可能需要为旧浏览器实现 js/html 条件检查以创建相同的效果
回答by MaxOvrdrv
You need to set the images within your div to display:block; not sure if this below is the correct format for "element type" within "class", but it should point you in the right direction.
您需要将 div 中的图像设置为 display:block; 不确定下面的这是否是“类”中“元素类型”的正确格式，但它应该为您指明正确的方向。
This will put the images one under the other.
这会将图像放在另一个下面。
.box1 img {display:block;}
.box1 img {显示：块；}
