如何放置div并排

我有一个主包装div，设置为100%宽度。在里面，我想有两个div，一个是固定宽度和另一个填补其余的空间。我如何浮动第二个div，以填补其余的空间。谢谢你的帮助。

646266 次浏览
小开

给第一个div float: left;和一个固定宽度，给第二个div width: 100%;和float: left;。这样应该可以了。如果你想在它下面放置项目，你需要在你想放在它下面的项目上clear: both;。

小开
最佳答案

有很多方法可以实现你的要求:

  1. 使用CSS float属性:

 <div style="width: 100%; overflow: hidden;">
<div style="width: 600px; float: left;"> Left </div>
<div style="margin-left: 620px;"> Right </div>
</div>

  1. 使用CSS display属性 -它可以用来使__abc1充当table:

<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell;"> Left </div>
<div style="display: table-cell;"> Right </div>
</div>
</div>

还有更多的方法，但这两种是最受欢迎的。

小开

如果你没有标记IE6，那么浮动第二个<div>，并给它一个等于(或可能比第一个<div>的固定宽度大一点)的边距。

HTML:

<div id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
100%;
background:red;
}
#fixed-width {
width:100px;
float:left
}
#rest-of-space {
margin-left:101px;
/* May have to increase depending on borders and margin of the fixd width div*/
background:blue;
}

余量解释了'rest-of-space' <div>可能包含比'fixed-width' <div>更多的内容。

不要给固定宽度的图片设置背景;如果你需要看到这些不同的“列”，那么使用假的列技巧。

小开

你可以使用CSS网格来实现这一点，这是为了说明目的的手工版本:

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

这将是跨浏览器兼容的。如果没有左边边距，如果你的内容比你的边栏长，你就会遇到内容一直跑到左边的问题。

小开

CSS3引入了灵活的盒子(又名。Flex box)也可以实现这种行为。

简单地定义第一个div的宽度，然后给第二个div一个flex-grow值1，这将允许它填充父div的剩余宽度。

.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}

<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>

演示:

div {
color: #fff;
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding: 10px;
}
.container {
background-color:#2E4272;
display:flex;
}
.fixed {
background-color:#4F628E;
width: 200px;
}
.flex-item {
background-color:#7887AB;
flex-grow: 1;
}
<div class="container">
<div class="fixed">Fixed width</div>
<div class="flex-item">Dynamically sized content</div>
</div>

请注意，伸缩盒不向后兼容旧浏览器，但对于针对现代浏览器是一个很好的选择(另见Caniuse和中数)。CSS技巧上有一个关于如何使用伸缩盒的非常全面的指南。

小开

我不太了解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>

您可能需要也可能不需要指定div的宽度


提交答案