CSS垂直向下显示元素，而不是水平直线 [英] CSS displaying elements vertically down instead of hortizontal straight
问题描述
我有元素包裹在一个div。元素在div内部的水平方向上显示。
问题是，我不知道如何垂直向下显示元素。
我做了一些研究，一个解决方案是使用vertical-align，但它似乎不工作。
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.
这里有一个例子，我完成
Here an example of what I"m trying to accomplish
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>
推荐答案
我不认为你不能实现你想做的，而不重新组织你的标记。您可能必须将您的div放在列容器中（至少在flexbox被广泛使用之前！）。
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!).
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;
}
说明：
自然流，如果元素是内联的，是彼此相邻，直到需要换行。如果元素是块级别的，它们将总是出现在前面元素的下面。另一个选项是浮动元素，但如果有空间，而不是在下面，它再次出现在前面的元素旁边。
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.
这篇关于CSS垂直向下显示元素，而不是水平直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：// s9。 postimg.org/6i34jzazz/save.jpg](\"http://s9.postimg.org/6i34jzazz/save.jpg\"){kind=link}