如何在垂直的旁边放置两个水平div？

Question

我想把我的东西对齐：

┌────┬─────────────────────────────────┐
│ No │  Some possible long content     │
│    ├─────────────────────────────────┤
│    │  Not so long stuff              │
└────┴─────────────────────────────────┘

使用表格使用rowspan=2只需5分钟，但使用div我不知道从哪里开始。我认为应该使用div，因为这不是表格数据。只是一种布局计数器的方式，一种可能的单独标题及其副标题（不长）：

<div id="container">
    <div class="div1">No</div>
    <div class="div2">Some possible long content</div>
    <div class="div3">Not so long stuff</div>
</div>

1宽度是常量，但其高度应为2和3高度的总和。 3始终包含一行代码，但2可能包含超过1行。

感谢任何帮助

Answer 1

如果您可以更改HTML结构以包装右侧div，则flexbox可以执行此操作。

.container {
  width: 50%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
}
.div1,
.right {
  display: flex;
  flex-direction: column;
}
.div1,
.right > div {
  padding: 1em;
}
.div1 {
  background: orange;
}
.div2 {
  background: pink;
}
.div3 {
  background: lightblue;
}

<div class="container">
  <div class="div1">No</div>
  <div class="right">
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet explicabo omnis, suscipit laborum officiis, eius sint ipsam doloremque magnam reiciendis corporis repudiandae ducimus laboriosam ex! Porro dolores aut vitae. Assumenda ut laborum dolor
      fugiat ullam nihil enim sapiente ex vel praesentium quo dolores distinctio, aliquid perferendis non accusamus dolorum excepturi?</div>
    <div class="div3">Not so long stuff</div>
  </div>
</div>

Answer 2

你可以使用绝对定位，如：https://jsfiddle.net/sueba6t2/1/

基于修改后的HTML标记（我将某些类重命名为符合标准），这里是css：

.container {
    position: relative;
}
.d1 {
    height: 100%;
    position: absolute;
    width: 3em;
}
.d2, .d3 {
    margin-left: 3em;
}

或者，如果您可以更改标记并使用更新，更精美的内容，请使用flex：https://jsfiddle.net/k7e01o29/

<强> HTML：

<div>
    <nav>No</nav>
    <article>
        <section>Long content</section>
        <footer>Not long</footer>
    </article>
</div>

<强> CSS：

div {
    display: flex;
    flex-direction: row;
}
article {
    width: 100%;
}

请注意，并非所有浏览器都支持灵活的盒子模块。如果你想支持IE10或更低版本，你将不得不使用polyfill，这可能是不受欢迎的。 Flex比你想要实现的功能强大得多，但它在浏览器支持方面有缺点。

有关详细信息，请参阅http://caniuse.com/#search=flex。

Answer 3

您可以使用css的display:table和display:table-cell

http://jsfiddle.net/8qv9z762/

#container {
    display: table;
    background-color: #dda;
    height: 1px; /*weird but important forgot why*/
}
.r {
    display: table-cell;
}
.div1 {
    height: 100%;
}
.div1, .div2, .div3 {
    border: solid 1px;
    padding: 5px 8px;
}

这样可以更好地支持浏览器，到处都不支持flexbox。

表格单元一直支持到ie8，而flex只支持ie11 +（最后两个版本）

只有这种技术的退缩是你不能有利润。但是，这不是问题，因为您可以拥有另一个子容器，它可以是table-cell div中的主要包装器，并且可以有保证金。