如何在响应式视图中按百分比填充剩余宽度？

Question

我在页脚中有三个框，divs以相同的宽度左移。 设计非常灵敏，所以我将每个尺寸调整为33％。

但我想隐藏一个较小的屏幕，这意味着只剩下两个（每个50％）。如何确保填充所需的空间，而无需为每个屏幕尺寸声明宽度？

为了说清楚，如果删除一个单元格，我希望它具有与表格单元格相同的行为：如果指定了表格宽度，则每个单元格都适合等宽。但浮动divs不。

Answer 1

您可以隐藏最后一个孩子，并以这种方式将框设置为50％的宽度。

.box { 
 
    float: left; 
 
    width: 33.3%; 
 
} 
 
@media (max-width: 768px) { 
 
    .box { 
 
    width: 50%; 
 
    } 
 
    .box:last-child { 
 
    display: none; 
 
    } 
 
}

<div class="footer"> 
 
    <div class="box"> 
 
    Content1 
 
    </div> 
 
    <div class="box"> 
 
    Content2 
 
    </div> 
 
    <div class="box"> 
 
    Content3 
 
    </div> 
 
</div>

Answer 2

您可以使用CSS3的Flex。但它在旧版IE中不起作用。

#main { 
 
    width: 100%; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
} 
 

 
#main div { 
 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
} 
 

 
@media only screen and (max-width:767px){ \t 
 
    #main div:last-child{display:none;} 
 
}

<div id="main"> 
 
    <div style="background-color:coral;">RED</div> 
 
    <div style="background-color:lightblue;">BLUE</div> 
 
    <div style="background-color:lightgreen;">Green div with more content.</div> 
 
</div>

Answer 3

你可以使用任何Flexbox位置（在现代的浏览器），或者display: table-*;（因为IE8无处不支持）

例：http://codepen.io/anon/pen/BNwXdb

---

标记

<footer class="flexbox"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</footer> 

<footer class="table"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</footer> 

CSS

/* Using Flexbox */ 
.flexbox { display: flex; } 
.flexbox div { flex-grow: 1; } 

/* Using display: table-* */ 
.table { display: table; width: 100%; } 
.table div { display: table-cell;} 


/* e.g. hide last column when viewport width <= 600px */ 
@media all and (max-width: 600px) { 
    footer div:last-child { 
     display: none; 
    } 
} 

无这些方法需要设置的宽度。