如何将两个div并排放置，并使第三个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放在div2下方。

- azakiio

Answer 1

您可以使用以下方法来实现：

    .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。

- Alper BULUT

---

这将div3放置在div2下方，但现在wrapper中的所有内容都移动到了中间。我还能保持向左推的内容吗？ - azakiio

您可以将 justify-content:flex-end 删除，并在 .div3 中添加 margin-left:auto 来防止移动。 - Alper BULUT

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>

- Temani Afif

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>

- m4n0

---

请注意，使用 repeat(auto-fill, 1fr) 是无效的。 - Temani Afif

谢谢。代码已更新。看起来似乎不涉及使用分数单位或需要与minmax()一起使用分数单位。 - m4n0

Answer 4

这里有一个弹性解决方案，您可以使用滑块来更改左侧框的宽度，以查看宽度不重要。

如果您不熟悉 flex，请看这里。

display: flex; 告诉容器作为弹性容器运行，flex 就像 float 一样是另一种显示行为。

flex-flow: row wrap;，现在容器是弹性的，告诉子元素按行显示，并在必要时换行，但在这种情况下不需要。

这就是全部，在右侧 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>

- sfy

Answer 5

由于 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>

没有完美的东西 ;)

- G-Cyrillus

Answer 6

嗨，如果有帮助的话，我编写了这个

.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>

- Abal