如何使用CSS浮動框

Question

我正在創建一個響應式網格佈局，但想知道如何浮動框並保持最後一個容器正確無誤地浮動。

例如。 全寬桌面版本將顯示4個框。

Ipad將顯示3個盒子

電話將顯示2個盒子。最後一個盒子需要有0的餘量。

這裏是我的小提琴http://jsfiddle.net/SGy4R/2/

<div id="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box">the last box needs no margin right when full width and responsive</div> 

    <div class="clearfix"></div> 

    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box">the last box needs no margin right when full width and responsive</div> 
</div> 

Answer 1

你可以使用一個媒體查詢：

// Normal 
.box:nth-child(4n) { margin-right:0; } 

@media (max-width: 3boxThreshold) { 
    .box:nth-child(3n) { margin-right:0; } 
} 

@media (max-width: 2boxThreshold) { 
    .box:nth-child(2n) { margin-right:0; } 
} 

然而，n-th子選擇是不是對舊的瀏覽器，所以你需要一個有效的選擇添加一些jQuery代替：

$(document).ready(function(e) { 
    removeMargin(); 

    $(window).resize(function() { 
     removeMargin(); 
    }); 

    function removeMargin() { 
     var wW = $(window).width(); 

     // Resets the boxes 
     $('.box').css("margin-right", "insertDefaultValueHere"); 

     if (wW < 3boxThreshold) 
      $('.box:nth-child(3n)').css("margin-right", 0); 
     else if (wW < 2boxThreshold) 
      $('.box:nth-child(2n)').css("margin-right", 0); 
     else 
      $('.box:nth-child(3n)').css("margin-right", 0); 
    } 
}); 

Answer 2

看到這個DEMO

編輯

你可以刪除#container width並添加#container padding-right:20px;

.box{ 
    float:left; 
    width:100px; 
    height:100px; 
    background:red; 
    margin-left:20px;; 
    margin-bottom:20px; 
    color:white; 
} 
.clearfix{ 
    clear:boh; 
} 
#container{   
    border:1px solid black; 
    float:left; 
    padding-right:20px; 
} 

Answer 3

地址：

.box:nth-of-type(4n){ 
margin-right:0 
} 

Answer 4

$(".clearfix").prev().css("float","right").css("margin","0px"); 

和

$($($(".clearfix").nextAll())[3]).css("float","right").css("margin","0px"); 

將做你所需要的。

Answer 5

更改類似這樣的標記：

<div class="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box">the last box needs no margin right when full width and responsive</div> 
</div> 
    <div class="clearfix"></div> 
<div class="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box">the last box needs no margin right when full width and responsive</div> 
</div> 

並設置margin-right: 0;去年孩子

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

Answer 6

使用負毛利的容器上，擺脫你的clearfix的div：

http://codepen.io/cimmanon/pen/dwbHi

#container { 
    margin: -20px 0 0 -20px; 
    overflow: hidden; 
} 

#container .box { 
    margin: 20px 0 0 20px; 
} 

Answer 7

我其實覺得這個話題有點棘手，因爲我確信你不僅想刪除最後一個箱子的邊距，而且你還希望所有箱子都有相同的寬度。

這意味着我們需要知道當前顯示多少個框，並忽略媒體查詢隱藏的框，在最後一個容器中刪除填充（我使用包裝上的填充而不是邊距）並共享填充在所有的盒子中使它們寬度相等。

退房小提琴：http://jsfiddle.net/SGy4R/8/

我基本上得到了#container的寬度和計數容器內的所有可見孩子。然後我得到第一個盒子的填充來計算每個盒子的填充份額。使用for循環，我將計算的寬度應用於每個框元素，同時從最後一箇中刪除填充。

我向小提琴添加了一個媒體查詢，以便您可以在#container中有3個或4個框時看到它是如何工作的。只需調整結果窗格的大小並再次運行小提琴。

// Get width of container 
var cont_width = $('#container').width(); 
// Count box divs in container 
var cont_children = $("#container > *:visible").length; 
// Get box padding from first child 
var box_padding = $('.box:first-child').innerWidth(); 
// Share last "non-existent" padding with all 4 boxes 
var padding_share = box_padding/cont_children; 
// Calculate box size 
var box_width = (cont_width/cont_children) + padding_share; 

// Set width for each box, remove padding for last box 
for (var i = 0; i <= cont_children; i++) { 
    if (i === cont_children) { 
     $(".box:nth-child(" + i + ")").css({ 
      'width':box_width - box_padding, 
      'padding-right': '0px' 
     }); 
    } 
    else { 
     $(".box:nth-child(" + i + ")").width(box_width-box_padding); 
    } 
} 

Answer 8

代替float荷蘭國際集團的.box ES，您可以使用display: inline-block和 添加text-align: justify到#container。

但它仍然不會如預期的那樣工作，因此您將用於clearfix的額外div並將其降至標記中的#container的底部。

然後，您將類名從.clearfix更改爲.spacer; spacer類將有：display: inline-block和width: 100%。

您還需要給.box es vertical-align: top;否則，如果框中存在inline元素（如文本），水平對齊可能會中斷。

現在您會注意到盒子之間的間距合適，線條中的第一個和最後一個盒子貼在邊上。

JSFIDDLE

標記：

<div id="container"> 
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div> 
    <div class="box">the last box needs no margin right when full width and responsive</div>  
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box">the last box needs no margin right when full width and responsive</div> 

    <div class='spacer'></div> 
</div> 

CSS：

* { 
    box-sizing: border-box; /* www.paulirish.com/2012/box-sizing-border-box-ftw/ */ 
    } 

#container { 
    width: 480px; 
    border:1px solid black; 

    text-align: justify; 
    } 

.box { 
    display: inline-block; 
    vertical-align: top; 

    width: 100px; 
    height: 100px; 
    background:red; 

    margin-bottom:20px; 
    color:white; 
    } 

.spacer { 
    display: inline-block; 
    width: 100%; 
    } 

下面是一個物品，其詳細解釋了這種方法http://www.barrelny.com/blog/text-align-justify-and-rwd/。