浮动div而不设置宽度
浮动div而不设置宽度
提问于 2013-05-24 13:32:57
尝试在一个包装器div中浮动两个div，其中只有侧边栏具有基于%的宽度。主div需要根据侧边栏的宽度进行拉伸，填充包装器的剩余区域(即它本身没有宽度设置)。
<div class="wrapper">
<div class="sidebar"></div>
<div class="main"></div>
</div>下面是了解这一想法的fiddle：
我尝试了inline-block，float:left，float:right等的各种变体，但似乎就是不能正常工作。
回答 3
Stack Overflow用户
发布于 2013-05-24 13:38:54
这个问题可以用两种不同的方法来解决：
I.侧边和车身都有自己的滚动条
在这种情况下，sidebar将拥有自己的滚动条，main也将拥有自己的滚动条。当您不想在滚动主要内容时滚动侧边栏时，这种方法是很好的。
将包装器设置为全页面维度：
.wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}侧边栏的CSS将是：
.sidebar {
background: blue;
width: 20%;
height: 100%;
float: left;
overflow: auto;
}和你的主div：
.main {
background: red;
height: 100%;
overflow: auto;
}[!]你可以在FIDDLE.
上查看这个方法
II.侧边和正文将通过包装器滚动
在这种情况下，sidebar和main内容都将由主wrapper滚动。要创建这个，只需float侧边栏和主要内容。
.main {
background: red;
width: 80%;
float: left;
}
.sidebar {
background: blue;
width: 20%;
float: left;
}[!]你可以在FIDDLE.
上查看这个方法
Stack Overflow用户
发布于 2013-05-24 13:53:10
给定您提供的代码：
<div class="wrapper">
<div class="sidebar"></div>
<div class="main"></div>
</div>我认为这个css将会做你想要的：
.sidebar {
float:left;
width:20%;
}
.main {
margin:0 0 0 20%;
}假设您不希望.main div内容包装在.sidebar div内容之下；并且.main将占用父.wrapper宽度的剩余空间。
支持也应该回溯到过去。
Stack Overflow用户
发布于 2013-05-24 14:11:05
这里提供了您的解决方案
http://jsfiddle.net/YKPy5/
<pre>
<div class="wrapper">
<div class="main">
<div class="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div>
.wrapper {
background: 000;
width: 100%;
margin: 0;
padding: 0;
min-height: 200px;
}
.main {
background: red;
display: inline-block;
min-height: 200px;
}
.sidebar {
background: blue;
width: 20%;
min-height: 200px;
display: inline-block;
}
</pre>请注意:没有宽度，任何inline / inline-block元素都不会创建任何空格。你必须添加内容/文本才能获得效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16728246
复制相关文章
相似问题
腾讯云开发者
