我有一系列的行,每行包含两列,宽50/50。
我希望每隔一行都将左边的列(.image
)换到右边,但是我需要在html中维护序列,因为它在较小的屏幕上显示为一列。
CSS:
ul {
list-style: none;
padding-left: 0;
}
.row {
text-align: center;
}
@media (min-width: 768px) {
.image,
.text {
display: inline-block;
width: 50%;
vertical-align: middle;
}
/* alternate */
.row:nth-child(odd) .image {
float: right;
}
/* clearfix */
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
}
HTML格式:
<ul>
<li class="row">
<div class="image">
<img src="http://placehold.it/350x150">
</div><div class="text">
<p>Lorem ipsum</p>
</div>
</li>
<li class="row">
<div class="image">
<img src="http://placehold.it/350x150">
</div><div class="text">
<p>Lorem ipsum</p>
</div>
</li>
<li class="row">
<div class="image">
<img src="http://placehold.it/350x150">
</div><div class="text">
<p>Lorem ipsum</p>
</div>
</li>
</ul>
我知道我可以用flexbox做这个,我不能用在这个项目上。使用
float: left
不允许垂直对齐元素。我还有别的选择吗?注意:我用
display: inline-block
表示这些列,因为它们的高度不同,我希望它们彼此垂直对齐。编辑:我已经made a CodePen的例子使用浮点数如上所示。
最佳答案
您可以使用display:table
(可选)、:nth-child(even)
和direction
交换div位置:
codepen
ul {
margin: 0;
padding: 0;
width: 100%;
}
.row {
width: 100%;
display: table;
table-layout: fixed;
}
.row:nth-child(even) {
direction: rtl;
}
.row:nth-child(odd) .image {
text-align: right
}
.image,
.text {
display: table-cell;
direction: ltr;
border: solid;
}
.text {
background: tomato;
}
img {vertical-align:top;}
@media screen and (max-width: 640px) {
.row,
.image,
.text {
display: block;
direction:ltr
}
.row:nth-child(odd) .text {
text-align: right
}
}
<ul>
<li class="row">
<div class="image">
<img src="http://placehold.it/350x150">
</div>
<div class="text">
<p>Lorem ipsum</p>
</div>
</li>
<li class="row">
<div class="image">
<img src="http://placehold.it/350x150">
</div>
<div class="text">
<p>Lorem ipsum</p>
</div>
</li>
<li class="row">
<div class="image">
<img src="http://placehold.it/350x150">
</div>
<div class="text">
<p>Lorem ipsum</p>
</div>
</li>
</ul>