Question

我有一个父流体div（100%宽度），其中有5个固定宽度的div（每个50px）。我希望固定div之间的边距/沟槽相等，并且当父流体div的宽度减小时收缩。

不幸的是，即使在保证金/排水沟内存在收缩空间，最终也会推迟div。有没有办法实现这个目标？ 5个子div具有固定宽度重要。

这就是我想要的： enter image description here

这是我不想要的： enter image description here

到目前为止我所拥有的内容：http://jsfiddle.net/D6YxF/

<div class="fluid-parent">
    <div class="fixed-div">div 1</div>
    <div class="fixed-div">div 2</div>
    <div class="fixed-div">div 3</div>
    <div class="fixed-div">div 4</div>
    <div class="fixed-div fixed-div-last">div 5</div>    
</div>

.fluid-parent {
    background-color: rgb(187, 187, 187);
    width: 100%;
    height: 100%;
    overflow: auto;
}

.fixed-div {
    width: 50px;
    height: 50px;
    background-color: rgb(0, 102, 255);
    float: left;
    margin-right: 15%;
    text-align: center;
    color: white;
    font-family: Arial;
}

.fixed-div:last-child {
    margin-right: 0;    
}

Answer 1

在现代浏览器上，您可以使用display: flex，如下所示：

示例小提琴：http://jsfiddle.net/gy8GD/1/

<强> CSS

.fluid-parent {
    background-color: rgb(187, 187, 187);
    width: 100%;
    height: 100%;
    display: flex;
}

.fixed-div {
    width: 50px;
    height: 50px;
    flex-shrink:0;
    margin: 0 auto 0 0;
    background-color: rgb(0, 102, 255);
    text-align: center;
    color: white;
    font-family: Arial;
}

不幸的是显示：flex还没有被广泛支持，特别是IE<10。具有更广泛的跨浏览器兼容性（IE9+）的另一个解决方案是使用伪元素和calc()

作弊

示例小提琴：http://jsfiddle.net/uCqK5/2/

<强> CSS

.fluid-parent {
    background-color: rgb(187, 187, 187);
    width: 100%;
    height: 100%;
}

.fixed-div {
    width: 20%;
    height: 50px;
    background-color: rgb(0, 102, 255);
    text-align: center;
    color: white;
    float: left;
    font-family: Arial;
}

.fixed-div:after {
    content: "";
    float: right;
    width: -webkit-calc(100% - 50px);    
    width: -moz-calc(100% - 50px);    
    width: calc(100% - 50px);    
    height: 100%;
    background: rgb(187,187,187);
}

基本上每个div都是父宽度的1/5 ^th，但是:after伪元素放在它的右侧，填充了父background-color和它们的宽度定义为100% - 50px。

老实说，我找不到IE8的方法，但我会把头放在上面

Answer 2

如果您尝试将固定div宽度更改为5％怎么办？当你进行响应式设计时，我会建议你尽可能多地使用百分比。

像这样：

.fixed-div {
width: 5%;
height: 50px;
background-color: rgb(0, 102, 255);
float: left;
margin-right: 15%;
text-align: center;
color: white;
font-family: Arial;
}

http://jsfiddle.net/D6YxF/1/

Answer 3

解决方案：http://jsfiddle.net/D6YxF/5/

<强> HTML

<div class="fluid-parent">
  <div id='div1' class="fixed-div">div 1</div>
  <div id='div2' class="fixed-div">div 2</div>
  <div id='div3' class="fixed-div">div 3</div>
  <div id='div4' class="fixed-div">div 4</div>
  <div id='div5' class="fixed-div fixed-div-last">div 5</div>    
</div>

<强> CSS

.fluid-parent {
   background-color: rgb(187, 187, 187);
   width: 100%;
   height: 100%;
   overflow: auto;
}

.fixed-div {
  position:relative;
  top:0px;
  width: 50px;
  height: 50px;
  background-color: rgb(0, 102, 255);
  text-align: center;
  float:left;
  color: white;
  font-family: Arial;
 }
 #div1{
   left:0%;
 }
 #div2{
   left:15%;
 }
 #div3{
   left:30%;
 }
 #div4{
   left:45%;
 }
 #div5{
  left:60%;
 }

Answer 4

<div class="fluid-parent">
<div class="fixed-div">div 1</div>
<div class="fixed-div">div 2</div>
<div class="fixed-div">div 3</div>
<div class="fixed-div">div 4</div>
<div class="fixed-div fixed-div-last">div 5</div>    
</div>
.fluid-parent {
 background-color: rgb(187, 187, 187);
 width: 100%;
 height: 100%;
 overflow: auto;
 position:relative;
 }

 .fixed-div {
   width: 20%;
   height: 50px;
   background-color: rgb(0, 102, 255);
   float: left;
   margin-right: 15%;
   text-align: center;
   color: white;
   font-family: Arial;
  }

固定div与它们之间的响应水槽/边距

4 个答案: