Question

我一直在试图弄清楚如何格式化两侧都有元素（在我的情况下是按钮）的列表。我遇到的主要问题是我不希望列表文本环绕按钮，我希望它表现得更像表格;文本不应包含在其他列中。为了使事情进一步复杂化，我不一定事先知道“边元素”的大小。

这是我提出的代码：

<div style='display: table;'>
    <div style='display: table-row;'>
        <div style='display: table-cell'>
            <!--- Variable Width Left Side Element --->
        </div>
        <div style='display: table-cell; width: 100%;'>
            List Text
        </div>
        <div style='display: table-cell'>
            <!--- Variable Width Right Side Element --->
        </div>
    </div>
</div>

JSFiddle

我在Firefox，Chrome，Safari和Internet Explorer上尝试过此功能，它似乎运行良好。但是，我仍然担心，因为我不完全理解为什么这样做（我不喜欢使用我不理解的代码）。我关心的是width: 100%。这不应该指定单元格应占用整个父级，而不是该行中可用的所有空间吗？

最终，我的问题是：我可以相信使用这样的width: 100%吗？这是解决我问题的合适方法吗？

Answer 1

最终，我的问题是：我可以信任使用宽度：100％喜欢这样吗？这是解决我问题的合适方法吗？

是的，你可以。

表格很有趣......当单元格的宽度为100％时，只意味着占用尽可能多的空间从剩下的内容。

所以你已经分配了一部分100％的父母，所以中间的div只能抓住剩下的东西。

它的价值......一个`flex-box替代品：

＆＃13;

.row {
  display: flex;
  margin-bottom: .5em;
}
.row div {
  padding-left: 5px;
  padding-right: 5px;
}
.row div:first-child {
  flex-basis: 55px;
}
.row div:nth-child(2) {
  flex: 1;
}
.row div:last-child {
  flex-basis: 35px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div style="background-color: red"></div>
    <div>This text is not too long</div>
    <div style='background-color: blue'></div>
  </div>
  <div class="row">
    <div style='background-color: red'></div>
    <div>This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long.</div>
    <div style='background-color: blue'></div>
  </div>
</div>

＆＃13;

JSfiddle Demo

Answer 2

当您混合使用绝对和相对测量时，它的使用calc()功能很好。所以中间元素的宽度将是，

width: calc(100% - 90px) 100％是父级的全宽，90px是您的绝对测量值（55px + 35px）。

浏览器将根据父宽度（可用宽度减去90px）自动计算元素的实际宽度。直接给予100％不是正确的方式，imho。

Answer 3

表格单元格的宽度取决于其内容。除非在表格中给出table-layout：fixed，否则单元格将根据其内容进行扩展。

不是使用表格，而是可以使用浮点数，例如请点击此链接http://jsfiddle.net/osha90/e57dja5u/

<div >
<div class="clearfix" style="margin:10px 0px">

    <div style='width: 55px; height: 35px; background-color: red;float:left'>
    </div>
     <div style='width: 35px; height: 25px; background-color: blue;float:right'>
        </div>
    <div style="overflow:hidden;">
        This text is not too long
    </div>

</div>
<div class="clearfix">

    <div style='width: 55px; height: 35px; background-color: red;float:left'>
    </div>
     <div style='width: 35px; height: 25px; background-color: blue;float:right'>
        </div>
    <div style="overflow:hidden;">
        This text is very long. This text is very long. This text is very       long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long.
    </div>

</div>

.clearfix:after,.clearfix:before{
   content: "";
   clear: both;
   display: block;
}

Answer 4

由于表格行无法换行，因此100％宽度的表格单元格将强制单元格占用尽可能多的空间。您的其他两个单元格具有固定宽度，因为它们的内容具有固定宽度，并且表格单元格最小宽度是显示内容所需的宽度。这意味着100％宽度的实际宽度为100％ - 两个固定单元格。

div的100％宽度显示为table-cell

4 个答案: