我在一个父 div 下有两个 div，父 div 有 100% 的宽度：
<div id="parent">
<div class="left"></div>
<div class="right"></div>
</div>
条件是：
我已经尝试过 float:left 和 dispaly:inline-block 但两种解决方案似乎都不起作用。
任何建议都将不胜感激。
【问题讨论】：
如果您不关心 IE7，我会选择 @sandeep 的 display: table-cell 答案。
否则，这里有一个替代方案，但有一个缺点：“正确的”div 必须在 HTML 中排在首位。
见： http://jsfiddle.net/thirtydot/qLTMf/
完全一样，但删除了“正确的 div”：http://jsfiddle.net/thirtydot/qLTMf/1/
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
<div id="parent">
<div class="right">right</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>
【讨论】：
display: table-cell 我自己发布一个答案。
@易洁;检查链接也许这就是你想要的http://jsfiddle.net/sandeep/NCkL4/7/
编辑：
http://jsfiddle.net/sandeep/NCkL4/8/
或查看以下片段
#parent{
overflow:hidden;
background:yellow;
position:relative;
display:table;
}
.left{
display:table-cell;
}
.right{
background:red;
width:50px;
height:100%;
display:table-cell;
}
body{
margin:0;
padding:0;
}<div id="parent">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="right">fixed</div>
</div>【讨论】：
display: table-cell 是在这里获得所需效果的好方法，但您应该知道它在 IE7 中不起作用。这个事实可能重要，也可能不重要。
HTML：
<div id="parent">
<div class="right"></div>
<div class="left"></div>
</div>
（在 HTML 标记中，div.right 需要在 div.left 之前）
CSS：
.right {
float:right;
width:200px;
}
【讨论】：
所以左 div 样式取决于右 div 的存在。我还想不出允许这种行为的 CSS 选择器。
因此，在我看来，您需要以编程方式在父 div 或左 div 上添加类服务器端（或在 JS 中）。
<div id="parent twocols">
<div class="left"></div>
<div class="right"></div>
</div>
或
<div id="parent">
<div class="left"></div>
</div>
所以正确的风格总是：
.right {
float: right;
width: 200px; /* or whatever value you need */
/* margin and padding at your discretion */
}
左边的样式是：
.parent.twocols .left {
margin-right: 200px; /* according to right div width + margin + padding*/
}
【讨论】：
.left{margin-right:200px}，而是使用.parent.twocols .left{margin-right:200px}，仅当.twocols附加类指示的右列存在时才包含此边距
我已经成功使用了 white-space: nowrap;在外部容器上，显示：inline-block；在内部容器上，然后（在我的情况下，因为我想要第二个自动换行）空白：正常；在内部。
【讨论】：
我想这就是你想要的：
<html>
<head>
<style type="text/css">
#parent
{width:100%;
height:100%;
border:1px solid red;
}
.left
{
float:left;
width:40%;
height:auto;
border:1px solid black;
}
.right
{
float:left;
width:59%;
height:auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="parent">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="right">This is the right side content</div>
</div>
</body>
</html>
【讨论】：