我正在尝试编写通用的CSS选择器,可以将包含在div中的任何元素垂直或水平排列。我无法控制放置在外部div中的元素。
例如:在下面的代码片段中,id为one的div、id为two的div和id为three的按钮应该被显示为水平排列的元素列表。
<div class="arrange-horizontally">
<div id="one"></div>
<div id="two"></div>
<button id="three"></button>
</div>
同样地,我需要编写另一个CSS选择器来垂直排列元素。
<div class="arrange-vertically">
<div id="one"></div>
<div id="two"></div>
<button id="three"></button>
</div>
我尝试使用display:table-row(水平显示这些元素)。 display:table-cell不能垂直排列元素。 实际上,我首先寻找更好的方法,然后再解决问题。
这是我用来获得所需效果的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;
}
以下是需要解决的问题 -
当我尝试在水平/垂直样式的div中添加大量元素时,没有滚动条出现。
从上面的示例代码中可以看到,“一些comp1”元素的宽度根据“第一个垂直放置的元素”的宽度进行了更改。这绝对是一个问题。