如何将两个 div 并排放置，第三个 div 与第二个对齐

Question

我有两个并排的 div（div1 和 div2），我想在 div2 下放置第三个 div (div3)。

我尝试为 div3 添加边距以尝试将其对齐，但 div1 的宽度是动态的。我也尝试过将 div3 向右浮动，但内容太远，与上图中的 div2 的开头不对齐

.row {
  display: flex;
}

.div1 {
  margin-right: 1em;
}

<div class="row">

  <div class="div1">
    <p> some content with unknown width</p>
  </div>

  <div class="div2">
    <p> some content </p>
  </div>

</div>

<div class="div3">
  <p> some content that should be under div2 </p>
</div>

默认行为是 div3 在 div1 之下。我正在尝试将 div3 放在 div 2 下方

Answer 1

您好，如果有帮助，我编写了此代码

.first-container {
  display: flex;
  flex-direction: row;
}
    
.first-container div{
  margin: 10px;
}
    
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="first-container">
    <div class="first">first</div>
    <div class="second">second</div>
  </div>
  <div class="third">third</div>
</div>

Answer 2

使用浮动和内联块：

[class*="div"] {
  display:inline-block;
  border:2px solid;
}

.div1 {
 float:left;
 margin-right: 1em;
 margin-bottom:10px; /*mandatory margin to push the div3*/
}

<div class="row">

  <div class="div1">
    <p> some content with unknown width</p>
  </div>

  <div class="div2">
    <p> some content </p>
  </div>

</div>

<div class="div3">
  <p> some content that should be under div2 </p>
</div>

Answer 3

您可以使用CSS Grid 结构。通过这种方式，您可以将所有子元素放在一个父容器中。

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 2 / 2 / 3 / 3;
}

/* Snippet styling */

.row > div {
  background: #6A67CE;
  color: white;
  text-align: center;
  text-transform: capitalize;
  font-family: sans-serif;
}

<div class="row">

  <div class="div1">
    <p> some content with unknown width</p>
  </div>

  <div class="div2">
    <p> some content </p>
  </div>

  <div class="div3">
    <p> some content under div2 </p>
  </div>

</div>

Answer 4

这里有一个flex解决方案，可以用滑块改变左边框的宽度，看看宽度是不是没关系。

如果您不熟悉 flex，请按以下步骤操作。

display: flex; 告诉容器充当 flex 容器，flex 只是另一种显示行为，就像float。

flex-flow: row wrap;，既然容器是 flex 的，就告诉子项显示成一行，必要时进行换行，而不是在这种情况下。

就是这样，在右边的div中添加两个框，并设置一些演示的宽度和高度后，我们就完成了。

window.addEventListener('DOMContentLoaded', e => {
  let left = document.querySelector('.left')
  let range = document.querySelector('.range')
  range.addEventListener('input', e => {
    left.style.width = e.target.value + 'px'
  })
})

div {
  border: 3px solid green;
}

.container,
.right {
  border: none;
}

.container {
  display: flex;
  flex-flow: row wrap;
}

.left,
.one,
.two {
  min-width: 50px;
  min-height: 50px;
}

.left {
  margin-right: 1em;
}

.one {
  min-width: 80px;
}

.two {
  margin-top: 1em;
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="one"></div>
    <div class="two"></div>
  </div>
</div>
<input class="range" type="range" min="50" max="300"></input>

Answer 5

您可以通过以下方式做到这一点：

    .wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    
    .div {
      flex-basis: 50%;
      min-height: 100px;
    }
    
    .div1 {
      background: red;
    }
    .div2 {
      background: blue;
    }
    .div3 {
      background: aqua;
    }

<div class="wrapper">
  <div class="div div1">div1</div>
  <div class="div div2">div2</div>
  <div class="div div3">div3</div>
</div>

这是codepan

Answer 6

由于 div 不共享同一个父级，您可以使用 display:contents 并将网格布局设置为上一层，但不幸的是，display:contents 尚不支持所有位置。

这是一个示例（body 是包装器，.row 不再可见）

body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
}

.row {
  display: contents;
  /* removed from the tree */
}

div {
  border: solid;
  /* show me */
  grid-column: 2;
  /* make it  the defaut column position */
  width: max-content;
}

.div1 {
  grid-column: 1;
  /*a single reset  enough here */
}

@supports (display:grid) {
  .disclaimer {
    display: none;
  }
}

<div class="row">
  <div class="div1">
    <p> some content with unknown width</p>
  </div>
  <div class="div2">
    <p> some content </p>
  </div>
</div>
<div class="div3">
  <p> some content that should be under div2 </p>
</div>
<p class="disclaimer">Your browser do not support <code>display:contents</code>.</p>

另一种可能性是表格布局算法

带有 display:table 的示例（广泛支持），但每列的每个单元格都具有相同的宽度。

body {
  display: table;
  border-spacing: 10px;
}

.div3,
.row {
  display: table-row;
}

.row>div,
.div3>p,
.div3::before {
  display: table-cell;
  border: solid;
}

.div3::before {/* it stands in column 1 */
  content: '';
  border: none;
}

<div class="row">
  <div class="div1">
    <p> some content with unknown width</p>
  </div>
  <div class="div2">
    <p> some content </p>
  </div>
</div>
<div class="div3">
  <p> some content that should be under div2 </p>
</div>

没有什么是完美的；）