两个div同一行，一个动态宽度，一个固定
两个div同一行，一个动态宽度，一个固定
提问于 2011-05-19 09:47:18
我在一个父div下面有两个div，父div有100%的宽度：
<div id="parent">
<div class="left"></div>
<div class="right"></div>
</div>这些条件是：
，
- ，我想要同一行的两个div。
- 右div可能存在也可能不存在。当它出现的时候，我希望它总是固定在右边。然而，左div必须是弹性的-它的宽度取决于它的内容。
我尝试过浮动:左侧和dispaly:内联块，但这两种解决方案似乎都不起作用。
如有任何建议，将不胜感激。
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-05-19 10:47:36
如果你不关心display: table-cell的话，我会给出@sandeep的IE7的答案。
否则，这里有一个选择，它有一个缺点:在HTML中，“右”div必须放在第一位。
见： 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>Stack Overflow用户
发布于 2011-05-19 10:11:29
@益杰；查看链接，也许这是你想要的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>
Stack Overflow用户
发布于 2011-05-19 10:51:35
HTML：
<div id="parent">
<div class="right"></div>
<div class="left"></div>
</div>(div.right需要在HTML中的div.left之前)
CSS：
.right {
float:right;
width:200px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6056759
复制相关文章
相似问题
腾讯云开发者
