如何并排放置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属性 - 可以用来使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>
   

有更多的方法,但这两个是最受欢迎的.

Answer 2

CSS3引入了灵活的盒子(又名flex盒子),它也可以实现这种行为.

只需定义第一个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>

jsFiddle演示

请注意,弹性框不能与旧浏览器向后兼容,但对于定位现代浏览器来说是一个很好的选择(另请参见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>

或者使用float和margin的更传统的方法.

我在此示例中包含了一个背景颜色,以帮助显示事物的位置 - 以及如何处理浮动区域下方的内容.

不要将你的风格内嵌在现实生活中,将它们提取到样式表中.

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>