Question

我有经典的两个divs并排问题，通常我没有问题（浮动：左边两个div并添加一个清除：两个div后面的）。

我的要求是要解决这个问题更加复杂......

我希望左手div占据包含div的左手边（左手div将保持一个数字，即'1'）

我希望右手div占据左侧div右侧的剩余空间 - 最重要的是，当没有足够的'空间'时，我希望它不要低于左手div适合。相反，我希望右手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中的文本仍然向右对齐（而不是在左手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 Tables都可以做到这一点。

<强> 支持

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个div，并排，右手div占用div的剩余部分

3 个答案: