具有像素和百分比宽度的 CSS 并排 div答案

【问题标题】：CSS side by side div with Pixel and Percent widths具有像素和百分比宽度的 CSS 并排 div
【发布时间】：2011-07-17 05:03:33
【问题描述】：

我在父 div 中有两个 div（并排），我希望右 div 占据 100% 的剩余空间（即 100% - 200px），并且应该始终保持在左 div 旁边（不低于左 div）：

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

如果您希望右 div 具有恒定宽度：

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

和 CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

无国界效果很好

JSFiddle

【讨论】：

【解决方案2】：

由于您只有一个固定宽度的列，因此将其向左浮动就可以了。至于第二列，不指定float和width；这确保它是 100% 宽的。但是你必须添加一个左边距；否则第二列会干扰浮动列，例如

水色背景会出现在蓝色背景后面（关闭蓝色背景看看我的意思）
如果第二列变得比第一列高，其他内容将开始出现在第一列下方。

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>

【讨论】：

【解决方案3】：

接受的答案很好，但我遇到了一个问题，即右栏在我的子导航下方，因为它也是浮动的。

使用现代浏览器，您现在可以让所有元素浮动，并使用更酷的 CSS 获得相同的效果。使用“宽度：计算（100% - 380px）；”意味着你可以浮动你的元素，让它们正确定位，并且看起来很酷......

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

演示http://jsfiddle.net/auUB3/1/

【讨论】：

我能问一下你的意思吗？ IE 10 支持您链接到的页面显示 calc。
是的，这意味着它从 IE 10 版本开始工作。 7、8、9 等旧版本无法正常工作。因此，当您使用 CALC 功能时，您的网站对访问者的要求更高，其中一些可能会遇到问题。
老实说，我并不关心那些用户，尤其是 7 或 8 用户。如果用户使用 IE 9，我的很多网站都无法运行，但没关系 98% 的用户它会完美运行为了。这是通过全球统计数据得出的。我完全相信我们，开发人员，应该停止向后兼容，以使网站和其他软件能够工作以适应 5 年前应该升级的人。我们只会扼杀自己并增加成本和复杂性。我在上一个网站上使用了 flexbox，因为我想这样做。没有人抱怨。

【解决方案4】：

好的，所以在较新的浏览器上，我们将能够使用 display: box;和 box-flex: 1,... 属性。我目前在一个只需要 Chrome 的 web 项目中使用它，所以这个新的 CSS3 东西为我解决了很多问题。

【讨论】：

【解决方案5】：

将位置属性添加到您的右侧 div。左 div 200px 和右 div 占用剩余空间。

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

在http://jsfiddle.net/EpA5F/1/查看工作示例

【讨论】：

此解决方案不适用于相对定位。 jsfiddle.net/EpA5F/130

【解决方案6】：

制作父包装float。此外，您可能希望删除第二个子 div 中的 width: 100%。并根据里面的内容量设置它的宽度。或者您可以为两个子 div 设置百分比。示例30% 和70%。

Demo here

【讨论】：

不过要小心添加填充和边框。

【解决方案7】：

您的左侧 div 应该具有向左浮动，并且其像素宽度使用相对位置。您的右侧 div 应该只具有相对位置，并且可能隐藏溢出。这应该可以解决您的问题。不需要使用清除浮动的div。

【讨论】：