如何并排放置div

Posted 2023-03-06

【中文标题】如何并排放置div

【英文标题】：How to place div side by side

【发布时间】：2011-02-07 22:10:57

【问题描述】：

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

【问题讨论】：

下次也请放置您的示例代码，以便开发人员在这里更清楚问题..

是 position:absolute 一个选项吗？您可以将位置设置到容器的两侧，并且 div 将采用新的大小。

【参考方案1】：

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

只需定义第一个 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 上提供了有关如何使用弹性框的全面指南。

【讨论】：

花了一整天的时间才找到解决方案，这个答案解决了它！我有 4 个面板与第 3 和第 4 个面板并排，有时其中没有任何东西。他们都生活在一个包含有边框的 div 中。整个 float:left 在第一个 div 情况下让我有一个 div 越过底部的边框，因为生成的标签是动态的。标签是跨度，因为这就是 ASP 呈现它们的方式。没有 float:left 在同一行上只制作了 3 个 div。使用表格是不可能的。谢谢！

是否有向后兼容的方法来使用这样的东西，即对于我们仍然必须支持 IE 8-10 的可怜的 sap 来说

@BenA.Hilleli 可能取决于您的要求（例如progressive enhancement or graceful degradation），但快速搜索得到了这个（有点过时）"How to use flexbox in the real world" guide 以及支持 IE6 的Flexie.js -9。或者，尝试这个问题的任何其他答案，因为它们实现了相同的目标。

【参考方案2】：

给第一个divfloat: left;和固定宽度，给第二个divwidth: 100%;和float: left;。这应该够了吧。如果您想在其下方放置项目，您需要在您想要放置在其下方的项目上添加clear: both;。

【讨论】：

这个答案对我不起作用。给第二个 div 宽度：100% 表示填充 100% 的视口，并不意味着将第一个 div 向左浮动后填充 100%。

【参考方案3】：

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

使用CSS float property:

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

使用CSS display property - 可用于使divs 像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>

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

【讨论】：

@filoxo 的 html 5 解决方案，改用它

前评论者所说的：考虑将每个 filoxo 的 HTML5 解决方案添加为 #3。

@TheMcMurder：对于需要支持旧浏览器（例如 IE

@Oyvind，你是对的。这取决于您的用例。如果您支持 IE 8、9 或 10，则必须支持 polyfill 我建议使用 polyfill.io cdn.polyfill.io/v2/docs 或 github.com/10up/flexibility 之类的服务，但您可能有非常严格的要求，无法使用 polyfill。

溢出：隐藏有什么作用？这不是针对具有指定高度的元素吗？

【参考方案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>

【参考方案5】：

我对 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 的宽度

【讨论】：

可能display:flex 是最好的解决方案，但我认为inline-block 也很出色，因为它适用于更多浏览器。顺便说一句，您可能需要用 <div style="white-space:nowrap"> 包装两个 div，以防止在调整大小时中断。

这是一个很好的模板解决方案。唯一的问题是它将内容较少的 div 推到底部。怎么推到顶？

nvm，随便搜一下，解决方法是：vertical-align:top;

@JohnHenckel 这意味着它不适用于所有浏览器，它不能以相同的方式适用于所有浏览器吗？ inline-block 代码。

@guillermo 它运行不正常。所有的 div 都没有并排放置。这是为什么。不清楚。

【参考方案6】：

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

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

【参考方案7】：

如果您没有标记 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 技巧。