Question

我一直在尝试使用CSS为特定div分割文本行（预期的行为类似于具有两列的表）。

我希望第一列具有固定宽度，并且第二列使用剩余的空间。我的问题是，当右列有一个长文本并且我调整浏览器窗口大小时（例如我使用的是手机），右列会向下移动。

这是预期的行为：

-------------------------------------------------------------------------
Text 1  | This is a long text. This is a long text. This is a long text. 
        | This is a long text. This is a long text. 
-------------------------------------------------------------------------

将浏览器窗口大小调整为</ strong>后，得到的结果是：

------------------------------------------------------------------------- Text 1 This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. -------------------------------------------------------------------------

我正在使用的代码如下：

div.columns { width: 50%; margin: auto; } div.columns div { float: left; } div.columns div.col1 { width: 50px; } div.columns div.col2 { width: 800px; } div.clear { clear: both; }

<div class="columns"> <div class="col1">Text 1</div> <div class="col2">This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.</div> </div> <div class="clear"></div>

当窗口大小小于850px时，这显然会发生。在将col2的宽度设置为50px之后，如何指定col1的宽度是什么，同时保持预期的行为？

Answer 1

利用calc。所以你可以让你的右元素占父元素的100％大小减去你左边元素的宽度。

对于您的div.columns div.col2：

div.columns div.col2 {
  width: calc(100% - 50px);
}

Fiddle

Answer 2

我认为这是一个更好的解决方案，因为它不需要calc：

只需将display: table;用于父div，将display: table-cell;用于以下列：

＆＃13;

div.columns { 
  display: table; width: 50%; margin: auto; border: 1px solid black; 
}
  
div.columns div.col1 { display: table-cell; width: 50px; background: #f0fff0; }

div.columns div.col2 { display: table-cell; background: #f4f4ff; } 
/*no width required for second div, it will auto-fill remaining width */

＆＃13;

<div class="columns">
  <div class="col1">Text 1</div>
  <div class="col2">This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.</div>
</div>
<!--<div class="clear"></div> *** not required! -->

＆＃13;

html + CSS - 当单元格有多行文本时拆分列

2 个答案: