html - 按内容自动调整三列中第一列的宽度

Question

也许有人可以帮助我: 我得到了三列。第一列应获得尽可能多的宽度。第二列应获得其中内容所需的宽度。第三个column-width是固定的。

我准备了一个包含一些内容的 fiddle 。要形象化我想要得到的东西，只需看看 fiddle 中的底行。

所以看看第一行，第二列应该直接移动到右列之前，第一列的宽度尽可能大。

CSS部分:

.wrap {
  width: 100%;
}

.first {
  background-color: coral;
  float: left;
  min-width: 33%;
}

.second {
  background-color: lightblue;
  float: left;
}

.third {
  background-color: lightgreen;
  float: right;
  min-width: 25%;
}

html部分:

<div class="wrap">
  <div class="first">xxxxx</div>
  <div class="second">yyyy</div>
  <div class="third">zzzzzzz</div>
</div>
<br>
<br>
<br>
<div class="wrap">
  <div class="first"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
    <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  </div>
  <div class="second">yyyyyyy</div>
  <div class="third ">zzzzzz</div>
</div>

link to fiddle

Answer 1

试试这个:

Note: In class.third you can mention fixed width instead of min-width as per your requirement.

查看演示 here

CSS:

.wrap {
  width: 100%;
  display: flex;
}

.first {
  background-color: coral;    
  flex: 1 0 0;
  word-break: break-all;
}

.second {
  background-color: lightblue;  
}

.third {
  background-color: lightgreen;  
  min-width: 25%;
  word-break: break-all;
}