Question

我有一个盒子里面有3个div。我在下面做了一张照片，两个外部的div我已经设置了我需要它们的宽度但是中间div我想要流畅并且填充到剩下的宽度是什么。

此代码将用于具有不同宽度的不同页面，因此我希望中间始终根据填充剩余宽度进行调整。

enter image description here

Answer 1

如果不打破一条线就可以使用display: table-cell。为了确保间距能够正常工作，您应该将div包装在容器中并在容器上设置max-width。然后找到中间框的剩余宽度：65 + 185 = 250. 800（我的最大宽度示例） - 250 = 550. 550/800 = 68.75％。将该百分比设置为中间框，它将完全流畅。无论浏览器有多小，框3都不会突破到下一行。

FIDDLE

CSS

.container{
  max-width: 800px
}

.box1{
  width: 65px;
  height: 50px;
  background: black;
  display: table-cell;
  vertical-align: top;

}

.box2{
  width: 68.75%;
  height: 50px;
  background: green;
  display: table-cell;
  vertical-align: top;
}

.box3{
  width: 185px;
  height: 50px;
  background: yellow;
  display: table-cell;
  vertical-align: top;
}

HTML

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Answer 2

可能的解决方案：

这是css

main { width:100% }
left { 
     display:inline-block; 
     width: 65px; 
     height: 291px; 
     background-color:#0000ff; 
}
middle {  
     position:absolute;
     display:inline-block; 
     background-color:#ffff00; 
     height: 291px; 
     margin-right:185px
}
right { 
     float:right; 
     height: 291px; 
     background-color: #ff0000; 
     width: 185px;
}

和html：

<div class="main">
    <div class="left"></div>

    <div class="middle">
        blablabla
    </div>

    <div class="right"></div>
</div>

您可以在此处找到工作示例：http://jsfiddle.net/mLJLr/1/

Answer 3

使用此css：

    #left {
        float:left;
        width:65px;
        background-color:#ff0000;
    }
    #center {
        float:left;
        width:100%;
        max-width: initial; 
        background-color:#00AA00;
    }
    #right {
        float:right;
        width: 185px;
        background-color:#00FF00;
    }

这个Html：

    <div  id="center">
        <div id="left">
            left
        </div>
        center
        <div id="right">
                right
        </div>
    </div>

在线测试：http://jsfiddle.net/9PFPm/

如何在CSS中制作不同尺寸的3列宽流体

3 个答案: