CSS 在一个 div 中水平或垂直排列元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24504817/
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
Arrange elements horizontally or vertically wrapped in a div
提问by PST
I am trying to write generic css selectors which will arrange any elements wrapped inside a div as vertically or horizontally. I do not have control on the elements which will be placed inside outer div.
我正在尝试编写通用 css 选择器，它将垂直或水平排列任何包裹在 div 内的元素。我无法控制将放置在外部 div 内的元素。
For example : In below snippet, div (id=one), div(id=two) and button (id = three) should be displayed as horizontally arranged list of elements.
例如：在下面的代码片段中，div (id=one)、div(id=two) 和 button (id =three) 应该显示为水平排列的元素列表。
<div class="arrange-horizontally">
<div id="one"></div>
<div id="two"></div>
<button id="three"></button>
</div>
Similarly, I need to write another css selector to arrange elements in vertical fashion.
同样，我需要编写另一个 css 选择器来以垂直方式排列元素。
<div class="arrange-vertically">
<div id="one"></div>
<div id="two"></div>
<button id="three"></button>
</div>
I tried with display:table-row (displays these elements horizontally). display:table-cell does not arrange elements vertically. In fact; I am looking for better approach first and then solution.
我尝试使用 display:table-row （水平显示这些元素）。display:table-cell 不会垂直排列元素。实际上; 我正在寻找更好的方法，然后是解决方案。
This is the css I am using to get the desired effect. One more change, I am making sure either of the vertical or horizontal styled div is enclosed in a div with .table Below is just one of the example and there could be more such combinations.
这是我用来获得所需效果的 css。还有一个变化，我确保垂直或水平样式的 div 都包含在一个带有 .table 的 div 中。 下面只是示例之一，可能还有更多这样的组合。
<div class="table>
<div class="arrange-vertically">
<div>
<button>1stverticallyPlacedElement</button>
</div>
<div class="arrange-horizontally">
<div>some comp1</div>
<div>some comp1</div>
<div>some comp2</div>
</div>
<button id="three">This is 3rd element in vertical block</button>
</div>
</div>
.table {
display: table;
}
.arrange-horizontally {
overflow-x:scroll;
}
.arrange-horizontally > * {
display:table-cell;
}
.arrange-vertically {
}
.arrange-vertically > * {
display:table-row;
}
Issues with this -
问题与此 -
No scroll bars are coming when I try to push lot of elements in the horizontal/vertically styled div.
From sample code above, "some comp1" element's width is changed as per "1stverticallyPlacedElement"'s width. This is definitely an issue.
当我尝试在水平/垂直样式的 div 中推送大量元素时，没有滚动条出现。
从上面的示例代码中，“some comp1”元素的宽度根据“1stverticallyPlacedElement”的宽度进行了更改。这绝对是个问题。
回答by hurrtz
Try this:
尝试这个：
.arrange-horizontally > * {
display: inline-block;
text-align: center;
}
.arrange-vertically > * {
display: block;
}
回答by What have you tried
Use inline-blockto display the div elements horizontally. For the vertical example, see the fiddle, it's very simple.
用于inline-block水平显示 div 元素。垂直的例子，看fiddle，很简单。
HTML:
HTML：
<div id="horizontal">
<div>First one</div>
<div>Second one</div>
<div>Third one</div>
</div>
CSS:
CSS：
.horizontal{
float: left;
border: 1px solid green
}
.horizontal *{
display: inline-block;
margin-left: 10px;
}
.vertical {
float: left;
width: 100%;
border: 1px solid blue
}
.vertical > *{
display :block;
width: 100%;
}
回答by rushsangs
Did you try using float? They all align themselves horizontally using float.
Or try looking up display Inline.
For vertical, use
tags and then horizontal align with top.
您是否尝试使用浮动？它们都使用浮动水平对齐。或者尝试查找显示内联。对于垂直，使用
标签，然后水平与顶部对齐。
