如何将div并排放置

Question

我有一个宽度设置为100％的主包装div。在其中，我想要有两个div，一个是固定宽度的，另一个填充剩余的空间。如何将第二个div浮动以填充其余的空间。感谢任何帮助。

- markt

---

下次请放置您的示例代码，这样问题对开发人员来说会更清晰。 - Rob

position:absolute是一个选项吗？ 您可以将位置设置在容器的侧面，div将采用新的尺寸。 - Alex

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>

还有更多方法，但这两种是最流行的。

- Crozin

---

使用 @filoxo 提供的 HTML 5 解决方案，代替原来的方法。 - TheMcMurder

前面的评论者说：考虑添加HTML5解决方案，作为filoxo提出的第三种选择。 - Ahmed Fasih

对于我们需要支持旧浏览器（例如IE < 11）的人来说，这不是一个选择。 - Oyvind

@Oyvind，你说得很对。这取决于你的使用情况。如果你要支持IE 8、9或10，你就必须填充支持，我建议使用像polyfill.io https://cdn.polyfill.io/v2/docs/ 或https://github.com/10up/flexibility这样的服务，但你可能有非常严格的要求，不能使用polyfills。 - TheMcMurder

overflow: hidden是什么意思？这不是用于具有指定高度的元素吗？ - michael

Answer 2

CSS3引入了弹性盒子（又称flex box），可以实现这种行为。

只需定义第一个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上找到。

- filoxo

---

找到解决方案花了整整一天时间，但这个答案解决了问题！我有4个并排的面板，第3和第4个面板有时没有内容。它们都在一个带边框的包含div中，第一个div使用float:left时，由于生成的标签是动态的，底部会超出边框。标签是span类型因为ASP将其渲染成这样。如果不使用float:left，则只有3个div在同一行。而使用表格则不可能。谢谢！ - Luminous

有没有向后兼容的方法来使用类似这样的东西，即为我们这些仍然需要支持IE 8-10的可怜人。 - Ben A. Hilleli

@BenA.Hilleli 这可能取决于您的要求（例如渐进增强或优雅降级），但快速搜索得出了这个（有点过时的）“如何在现实世界中使用flexbox”指南以及支持IE6-9的Flexie.js。或者，尝试使用此问题的任何其他答案，因为它们可以实现相同的功能。 - filoxo

Answer 3

我不太了解HTML和CSS设计策略，但是如果你想要简单的东西，并且可以自适应屏幕大小（就像我一样），我认为最直接的解决方案是使

元素表现得像段落中的单词一样。尝试指定display:inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

你可能需要或者不需要指定DIV的宽度

- Guillermo Ruffino

---

可能 display:flex 是最好的解决方案，但我认为 inline-block 也很不错，因为它在更多的浏览器上都能工作。另外，你可能需要用 <div style="white-space:nowrap"> 包裹两个 div，以防止调整大小时出现换行。 - John Henckel

这是模板化的好解决方案。唯一的问题是它会将内容较少的 div 推到底部。如何将其推到顶部？ - almost a beginner

没事了，我只需要搜索一下，解决方案是：vertical-align:top; - almost a beginner

@JohnHenckel 这意味着它并不适用于所有浏览器，难道不能以同样的方式在所有浏览器上运行吗？inline-block 代码。 - Kavindu Gayantha

@guillermo，它不能很好地工作。所有的div都没有并排放置。为什么会这样？这不清楚。 - Kavindu Gayantha

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>

- Fenton

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>

这将跨浏览器兼容。如果没有margin-left，当您的内容比侧边栏长时，您将遇到内容一直运行到左边的问题。

- RDL

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技巧。

- Richard JP Le Guen

Answer 7

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

- Rob

---

这个答案对我没有起作用。将第二个 div 的宽度设置为 100% 意味着填充整个 viewport，而不是填充浮动第一个 div 左侧后剩余的部分。 - samjesse