如何排列连续的div左和右？
如何排列连续的div左和右？
提问于 2022-05-25 22:24:03
你好，我不太擅长css/浮点数/块等。
我有这样的安排
<div class="blue">1</div>
<div class="red">2</div>
<div class="blue">3</div>
<div class="red">4</div>
<div class="blue">5</div>
<div class="red">6</div>
我想将它的样式设置为1和2位于同一行(左和右浮动)，然后3和4位于同一行(左和右浮动)，以此类推。
目前，这些元素是在循环中创建的。我已经尝试了各种方法，让元素对齐，我想怎样做都没有用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-25 22:52:30
我想你想让他们两排对不对？
您可以向父容器添加flex属性。将justify-content弹性包装设置为 way ，然后在您的子元素上添加50% 宽度(考虑到任何继承的边距或填充影响布局宽度的填充，使其不溢出弹性包装)，然后从到-这将强制元素位于各自的两侧或更好的方式；将该行上的“剩余”空间放置在两个元素的中间。
* { /* set box-sizing on all elements to border-box */
box-sizing: border-box;
}
body { /* remove any margin or padding from the body */
margin: 0;
padding: 0;
}
#cont { /* add display flex, flex-wrap and justify-content to space between */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#cont>div { /* Set your child divs to a percentage that will only give you two per row
the flex-wrap will push elements down */
width: 50%;
}
.blue {
background-color: lightblue;
border: 1px solid darkblue;
}
.red {
background-color: pink;
border: 1px solid darkred;
text-align: right; /* remove if you want standard left side text-alignment on red elements */
}<div id="cont">
<div class="blue">1</div>
<div class="red">2</div>
<div class="blue">3</div>
<div class="red">4</div>
<div class="blue">5</div>
<div class="red">6</div>
</div>
如果这不是你想要的，让我知道，我可以编辑或删除这个答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72384742
复制相关文章
相似问题
腾讯云开发者
