如何在響應式視圖中按百分比填充剩餘寬度？

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

無這些方法需要設置的寬度。