如何并排放置div
如何并排放置div
提问于 2010-04-14 21:28:46
我有一个设置为100%宽度的主要包装器div。在里面，我希望有两个div，一个是固定宽度的，另一个是填充其余空间的。如何浮动第二个div以填充其余空间。谢谢你的帮助。
回答 5
Stack Overflow用户
发布于 2015-05-28 04:22:18
我对HTML和CSS的设计策略了解不多，但是如果你正在寻找一些简单的东西，并且可以自动适应屏幕(就像我一样)，我相信最直接的解决方案是让div表现为段落中的单词。尝试指定display: inline-block
<div style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>您可能需要也可能不需要指定DIVs的宽度。
Stack Overflow用户
发布于 2010-04-14 21:43:21
你可以使用CSS grid来实现这一点，这是用于说明目的的速记版本：
div.container {
display: grid;
grid-template-columns: 220px 20px auto;
grid-template-rows: auto;
}
div.left {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: row1-start
grid-row-end: 3;
background-color: Aqua;
}
div.right {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end; 1;
background-color: Silver;
}
div.below {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end; 2;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="below">Below</div>
</div>
或者更传统的使用浮点数和边距的方法。
我在这个例子中加入了背景颜色，以帮助显示内容的位置，以及如何处理浮动区域下的内容。
不要在现实生活中内联你的样式，将它们提取到一个样式表中。
div.left {
width: 200px;
float: left;
background-color: Aqua;
}
div.right {
margin-left: 220px;
background-color: Silver;
}
div.clear {
clear: both;
} <div class="left"> Left </div>
<div class="right"> Right </div>
<div class="clear">Below</div>
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>Stack Overflow用户
发布于 2010-04-14 21:48:26
<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
content
</div>
</div>这将是跨浏览器兼容的。如果你的内容比你的侧边栏还长，如果没有左边的空白处，你就会遇到内容一直跑到左边的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2637696
复制相关文章
相似问题
腾讯云开发者
