两个并排：第一固定宽度，第二拉伸配合 [英] Two divs side by side: first fixed-width, second stretch-to-fit

问题描述

我想创建一个布局，其中有两个 div 并排。第一个 div 应该和它的内容要求一样宽。第二个 div 应该伸展以填满剩余空间。标记将如下所示：

 < div id =d1> 
< div id =d2>固定宽度< / div> 
< div id =d3>拉伸< / div> 
< / div> 
  

问题是 div （例如当在 d1 上使用 display：table 时， code>和 display：table-cell 在 d2 和 d3



如何修改 d2 并拉伸 d3 以填满剩余空间？请注意， d2 的宽度未知，因此无法以像素为单位指定。

解决方案

我认为应该这样做：

 ＃d1 {
 display：table; 
 width：100％; 
} 
 
＃d2，＃d3 {
 display：table-cell; 
 padding：2px 6px; 
} 
 
＃d2 {
 white-space：nowrap; 
} 
 
＃d3 {
 width：100％; 
} 
  

您可以试试这里

I would like to create a layout where I have two divs side-by-side. The first div should be as wide as its content requires it to be. The second div should stretch to fill up the remaining space. The markup will look something like this:

<div id="d1">
    <div id="d2">fixed width</div>
    <div id="d3">stretching</div>
</div>

The problem is that either both divs are just as wide as their content and do not stretch to fill the entire horizontal space, or that (e.g. when using display: table on d1 and display: table-cell on d2 and d3) both divs stretch.

How can I fix the width of d2 and stretch d3 to fill up the remaining space? Note that the width of d2 is not known, so I cannot specify it in pixels.

解决方案

I think that should do it :

#d1 {
  display: table;
  width: 100%;
}

#d2, #d3 {
  display: table-cell;
  padding: 2px 6px;
}

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

You can try it here

这篇关于两个并排：第一固定宽度，第二拉伸配合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！