【问题标题】:How to place div side by side如何并排放置div
【发布时间】:2011-02-07 22:10:57
【问题描述】:

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

【问题讨论】:

  • 下次也请放置您的示例代码,以便开发人员在这里更清楚问题..
  • 是 position:absolute 一个选项吗?您可以将位置设置到容器的两侧,并且 div 将采用新的大小。

标签: html css


【解决方案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>

请注意,弹性框不向后兼容旧浏览器,但它是针对现代浏览器的绝佳选择(另请参阅 CaniuseMDN)。 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】:

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

  1. 使用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>
  1. 使用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/docsgithub.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 也很出色,因为它适用于更多浏览器。顺便说一句,您可能需要用 &lt;div style="white-space:nowrap"&gt; 包装两个 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,则浮动第二个 &lt;div&gt; 并给它一个等于(或可能略大于)第一个 &lt;div&gt; 的固定宽度的边距。

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

      边距说明“剩余空间”&lt;div&gt; 可能包含比“固定宽度”&lt;div&gt; 更多的内容。

      不要给固定宽度的一个背景;如果您需要明显地将这些视为不同的“列”,请使用Faux Columns 技巧。

      【讨论】:

        猜你喜欢
        • 2011-08-13
        • 1970-01-01
        • 2016-09-05
        • 1970-01-01
        • 1970-01-01
        • 2013-06-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多