CSS并排div与像素和百分比宽度 [英] CSS side by side div with Pixel and Percent widths

问题描述

我有两个div（并排）在一个父div，我想要右div占据100％的剩余空间（即100％ - 200px），应该总是留在左边div（不是左下div）旁边：

 < div id =wrapperstyle =width：100％;> < div id =leftstyle =background-color：Blue; height：100px; float：left; width：200px;>< / div> < div id =rightstyle =background-color：Aqua; height：100px; float：left; width：100％;>< / div> < div style =clear：both;>< / div>< / div>  

b $ b

解决方案

因为你只有一个固定宽度的列，向左移动，就是它。对于第二列，不要指定float和width;这确保它是100％宽。但是你必须添加一个左边距;否则第二列将干扰浮动列例如

• aqua背景将出现在蓝色背景后面（关闭蓝色背景，

如果第二栏比第一栏高，额外的内容就会开始显示在第一栏的下方。 $ b

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

b $ b

I have two div's (side by side) inside a parent div, i want right div to occupy 100% of remaining space (i.e. 100% - 200px) and should always stay next to left div (not below left 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>

解决方案

Since you have only one fixed width column, float it left and that is it. As for the second column, do not specify float and width; this makes sure it is 100% wide. But you must add a left margin; otherwise the second column will interfere with the floated column e.g.

• aqua background will appear behind blue background (turn off the blue background to see what I mean)
• if second column becomes taller than first one, additional content will start appearing below the first column.

<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>

这篇关于CSS并排div与像素和百分比宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！