如何左右排列连续的div？

Question

你好我不太擅长css/floats/blocks等等

我有这种设置

         <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 在同一行（左右浮动）等等。

目前这些元素是在循环中创建的。我试过各种方法让元素按我想要的方式排列都无济于事

Answer 1

我想你想让它们每行两个正确吗？

你可以添加一个flex 属性到父容器。将 flex-wrap 设置为 wrap，然后添加一个 50% width 在你的子元素上 （考虑到任何继承的边距或填充影响布局宽度不溢出 flex-wrap)，然后 justify-content 到 space-between，这将强制元素到它们各自的边，或者更好的说法是；将“剩下的”space 放置在该行的子项未占用的位置，在两个元素的中间。

* { /* 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>

如果这不是您要查找的内容，请告诉我，我可以编辑或删除此答案。

如何左右排列连续的div？

How to line up consecutive divs left and right?

html

javascript

css

jquery