如何并排放置两个div？ [重复]

Question

我有一个主包装纸

div

，宽度设置为100%。在里面我想要两个

div

，一个具有固定宽度，另一个填充其余空间。

如何浮动第二个 div 以填充其余空间？

Answer 1

有很多方法可以满足您的要求：

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>

2. 使用 CSS

   display

   属性 - 可用于使

   div

   表现得像

   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>

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

Answer 2

CSS3 引入了 flexiblebox（又名弹性框），它也可以实现这种行为。

只需定义第一个 div 的宽度，然后为第二个 div 指定

flex-grow

值

1

，这将允许它填充父级的剩余宽度。

.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和MDN）。 CSS Tricks 上提供了有关如何使用弹性框的精彩综合指南。

Answer 3

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

Answer 4

您可以使用 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>

Answer 5

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

这将是跨浏览器兼容的。 如果没有左边距，如果内容比侧边栏长，您将遇到内容一直向左运行的问题。

Answer 6

如果您不使用 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;
}

边距说明了“剩余空间”

<div>

可能比“固定宽度”

<div>

包含更多内容的可能性。

不要给固定宽度的背景；如果您需要将它们明显地视为不同的“列”，请使用Faux Columns技巧。

Answer 7

给第一个 div

float: left;

和固定宽度，并给第二个 div

width: 100%;

和

float: left;

。那应该可以解决问题。如果您想将项目放置在其下方，则需要在要放置在其下方的项目上添加

clear: both;

。