具有交替反转行且不带行标记的表格样式布局
具有交替反转行且不带行标记的表格样式布局
提问于 2013-06-25 21:33:38
我试图用CSS实现下面的布局，每个数字都是一个等宽的内容块：
移动视图：
1
2
3
4
5
6
7
8桌面视图：
1 | 2
-----
4 | 3
-----
5 | 6
-----
8 | 7请注意，3-4和7-8在桌面布局中是相反的。
由于3-4和7-8在语义上没有关联，所以我不希望将它们与父HTML元素耦合在一起(所以display:table布局可能不是一个选项)。
在桌面视图中，元素1的高度必须与元素2的高度相同，3的高度必须与元素4的高度相同，但高度不是预先知道的，我不想使用JavaScript (所以浮点数是不同的高度，除非有使用CSS calc的方法)。
因此，假设1-8都是来自同一父div的节元素，如果没有JavaScript，如何实现呢？
我不确定是否有解决方案，但我认为这是CSS应该能够支持的东西-所以答案可以包括草稿或大部分不支持的CSS。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-06-25 22:19:06
Flexbox可以做到这一点，但它需要事先准确地知道有多少元素。
http://codepen.io/cimmanon/pen/EDzGt
ul {
width: 5em;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@supports (flex-wrap: wrap) { /* hide from experimental Firefox */
ul {
display: flex;
}
}
li {
-webkit-flex: 1 50%;
-ms-flex: 1 50%;
flex: 1 50%;
}
li:nth-child(3),
li:nth-child(5),
li:nth-child(6) {
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
li:nth-child(4) {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
li:nth-child(7) {
-ms-flex-order: 4;
-webkit-order: 4;
order: 4;
}
li:nth-child(8) {
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}请注意，这只能在支持Flexbox和包装的浏览器中工作。目前支持的浏览器: Chrome，Opera，IE10，Blackbery10(火狐即将推出)。
http://caniuse.com/#search=flexbox
Stack Overflow用户
发布于 2013-06-25 21:52:16
像这样浮动3，4，7和8：http://jsfiddle.net/KH584/
.three, .four, .seven, .eight{
float:right;
}Stack Overflow用户
发布于 2013-06-26 03:42:39
根据cimmanon的回答，以及我随后的评论，我能够使用flexbox、包装和相对定位的组合。
CSS：
ul {
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
@supports (flex-wrap: wrap) {
ul {
display: flex;
}
}
li {
-webkit-flex: 1 50%;
-ms-flex: 1 50%;
flex: 1 50%;
outline: 1px solid red;
width: 50%;
}
li:nth-child(4n) {
position: relative;
left: -50%;
}
li:nth-child(4n-1) {
position: relative;
left: 50%;
}HTML：
<ul>
<li>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>2</li>
<li>3</li>
<li>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>5</li>
<li>6</li>
<li>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>8</li>
</ul>http://codepen.io/penx/pen/fnrJE
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17298799
复制相关文章
相似问题
腾讯云开发者
