2 divs，并排，右手 div 占据包含 div 的剩余部分

Question

我有经典的两个 div 并排问题，通常我没有问题（浮动：离开两个 div 并添加一个 clear:both div 在他们之后）。

我的要求使解决这个问题变得更加复杂...

我希望左侧 div 作为一列占据包含 div 的左侧（左侧 div 将包含一个数字，即“1.”）

我希望右边的 div 占据左边 div 右边剩余的 space - 最重要的是我希望它不要低于左侧 div 当没有足够的 'space' 适合它时。相反，我希望右手 div 保持原位，而 WRAP 内的文本则保持在左手 div 的右侧。当然这很简单！

我不想设置任意宽度值，因为左侧数字的长度 div 会变化，影响数字与右侧文本之间的距离。

这里是一些例子html：

<div class="popup-container"> // set to width: 300px; in css
    <div class="popup-text">
        <div class="float-left">
            <h3>2.<.h3>
        </div>
        <div class="float-left">
            <h3>Example text here, long enough to wrap around<.h3>
        </div>
        <div class="clear"></div>
    </div>
</div>

和css：

.popup-container {
       width: 300px;
}

.popup-text h3 {
    line-height: 1.25;
    padding: 0px 8px 0px 0px;
}

.float-left {
    float: left;
}

.clear {
        clear: both;
}

好的，我想就是这样了。如果有人知道如何让左边的 div 作为一列操作，右边 div 中的文本相对于它保持左对齐（而不是删除 'below' 左边的 div), 那会膨胀的。

编辑感谢所有的答案。我应该提到 (!!) 它必须在 IE8 中工作。我知道。但它确实如此。不幸的是，大型组织没有更新其机器。

Answer 1

使用display:flex;

.popup-container {
  width: 300px;
}
.popup-container .popup-text {
  display: flex;
}
.popup-text h3 {
  line-height: 1.25;
  padding: 0px 8px 0px 0px;
}
.float-left {
  float: left;
}
.clear {
  clear: both;
}

<div class="popup-container">
  <!-- set to width: 300px; in css -->
  <div class="popup-text">
    <div class="float-left">
      <h3>2.</h3>
    </div>
    <div class="float-left">
      <h3>Example text here, long enough to scroll</h3>
    </div>
    <div class="clear"></div>
  </div>
</div>

Answer 2

Flexbox 和 CSS 表格都可以做到这一点。

支持

Flexbox 是 IE10+

CSS 表格是 IE8+

FLEXBOX

.popup-container {
       width: 300px;
       border:1px solid grey;
}

.popup-text {
  display: flex;
}

.popup-text h3 {
    line-height: 1.25;
    padding: 0px 8px 0px 0px;
}

.left {
  flex: 0 0 auto;
  background: #c0ffee;
}

.right {
  flex:1;
  background: yellow;
}

<div class="popup-container"> 
    <div class="popup-text">
        <div class="left">
        <h3>2.</h3>
        </div>
        <div class="right">
        <h3>Example text here, long enough to wrap around</h3>
        </div>
    </div>
</div>

CSS 表格

.popup-container {
       width: 300px;
       border:1px solid grey;
}

.popup-text {
  display: table
}

.popup-text h3 {
    line-height: 1.25;
    padding: 0px 8px 0px 0px;
}

.left {
  background: #c0ffee;
  display: table-cell;
}

.right {
  background: yellow;
    display: table-cell;
}

<div class="popup-container"> 
    <div class="popup-text">
        <div class="left">
        <h3>2.</h3>
        </div>
        <div class="right">
        <h3>Example text here, long enough to wrap around</h3>
        </div>
    </div>
</div>

Answer 3

这是一个使用display: flex

的解决方案

.popup-container {
  width: 300px;
  background-color: coral;
}
.popup-text {
  display: flex;
}
.popup-text div.two {
  flex: 1;
  background-color: cornflowerblue;
}
.popup-text h3 {
  line-height: 1.25;
  padding: 0px 8px 0px 0px;
}

<div class="popup-container">
  <!-- set to width: 300px; in css -->
  <div class="popup-text">
    <div class="one">
      <h3>2.</h3>
    </div>
    <div class="two">
      <h3>Example text here, long enough to scroll</h3>
    </div>
  </div>
</div>

2 divs，并排，右手 div 占据包含 div 的剩余部分

2 divs, side by side, with right-hand div taking up remainder of containing div

html

css

css-float