防止導致浮動元素纏繞的邊緣

我有任意數量的相同大小的元素左側浮動，並由一些右/下邊距分隔以在網格中顯示它們。容納浮動元素的容器的大小將根據瀏覽器窗口的大小而變化。防止導致浮動元素纏繞的邊緣

我想將容器設置爲寬度100％，並儘可能多地將元素放在一行中。

我遇到的問題是，每行中最右邊的元素的右邊距必須包含在包含元素內，這意味着我並不總是獲得儘可能多的浮動元素行。

我不能只是將寬度添加到父級，因爲我想要使用寬度100％，並且從網格中的每個第n個元素中刪除邊距不起作用，因爲行中元素的數量將根據父級的寬度。

我想我可以使用jQuery來獲取容器的寬度，計算有多少元素應該適合，然後適當地刪除邊距，但我希望有一個更簡單的方法來解決這個問題。

例如，下面的代碼顯示每行2個框，但我希望有3個（不增加.wrap的寬度）。

<!doctype html> 
<html> 
<head> 
<style type="text/css"> 
    body{ 
     margin:0; 
    } 
    .wrap { 
     width: 400px; 
     margin: 0 auto; 
    } 
    main { 
     width: 100%; 
    } 
    .box{ 
     width: 100px; 
     height: 100px; 
     margin: 0 50px 50px 0; 
     float: left; 
     background-color: #999 
    } 
</style> 
</head> 
<body> 
<div class='wrap'> 
    <main> 
     <div class="box"> 
      <p>Some content...</p> 
     </div> 
     <div class="box"> 
      <p>Some content...</p> 
     </div> 
     <div class="box"> 
      <p>Some content...</p> 
     </div> 
     <div class="box"> 
      <p>Some content...</p> 
     </div> 
     <div class="box"> 
      <p>Some content...</p> 
     </div> 
     <div class="box"> 
      <p>Some content...</p> 
     </div> 
    </main> 
</div>

來源

2014-01-23 rowatt

這是我覺得施加負填充將是有益的能力的情況下，在我看來，同樣幅度的負'浸軋right'作爲'margin-right'會很好地實現這一點。你有沒有找到這個問題的工作解決方案？ –

這可以通過使用一個box-sizing劈來實現。編輯您的CSS，以便它包括：

.wrap { 
    position: relative; 
    padding: 0 25px; 
} 
.main { 
    position: absolute; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

這裏發生了什麼？

首先我們將所需的大小作爲填充添加到包裝中。因爲填充不在寬度範圍內，所以它被添加到「框」之外並且不影響內容寬度。接下來，我們將.main絕對定位於.wrap的相對位置。這樣絕對定位的元素不會直接受其相對父元素的限制。

現在，如果我們將box-sizing設置爲border-box，我們會命令CSS在其寬度中包含填充和邊框。因此，其父母（即400像素）的100％寬度和填充的50像素使得450像素是三個100像素和50像素邊距所需的大小。

你最後的CSS將

body{ 
    margin:0; 
} 
.wrap { 
    width: 400px; 
    margin: 0 auto; 
    padding: 0 25px; 
    position: relative; 
} 
main { 
    width: 100%; 
    position: absolute; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.box{ 
    width: 100px; 
    height: 100px; 
    margin: 0 50px 50px 0; 
    float: left; 
    background-color: #999 
}

來源

2015-07-27 01:23:59

防止導致浮動元素纏繞的邊緣

回答

相關問題