Question

我有一堆内联块元素。奇数和偶数元素的样式不同，所以我希望它们仅在每行奇数个元素后换行，以在调整屏幕大小时保留网格图案。如果重要的话，元素大小都相同。

.thing{
    display:inline-block;
    height:100px;
    width:100px;
    margin:5px;
}
.thing:nth-child(odd){
    background-color: #999;
    border-radius: 0 20px;
}
.thing:nth-child(even){
    background-color: #ccc;
    border-radius: 20px 0;
}
/* something that will only allow line breaks after 1st or 3rd or 5th etc element  */

有没有办法优雅地做到这一点？我认为理论上可以为每个＆＃34; case＆＃34;做一堆媒体查询块。并使用：nth-child（）：强制换行后，但我想避免这种情况。

Answer 1

你可以包装每一对并内联包装器。（如果这对你有用）？

.wrap-things {
  display:inline-block;
  white-space:nowrap;
}
.thing{
    display:inline-block;
    height:100px;
    width:100px;
    margin:5px;
}
.thing:nth-child(odd){
    background-color: #999;
    border-radius: 0 20px;
}
.thing:nth-child(even){
    background-color: #ccc;
    border-radius: 20px 0;
}

<div class="wrap-things">
  <div class="thing"></div>
  <div class="thing"></div>
</div>
<div class="wrap-things">
  <div class="thing"></div>
  <div class="thing"></div>
</div>
<div class="wrap-things">
  <div class="thing"></div>
  <div class="thing"></div>
</div>
<div class="wrap-things">
  <div class="thing"></div>
  <div class="thing"></div>
</div>

CSS强制每行奇数个元素

1 个答案: