100％寬度拆分爲3 * 33％divs

Question

我一直在嘗試使用3個divs像一張桌子，所以使3列我以爲我＃d使3 33％divs。這工作正常，他們填滿了頁面，但只要我想添加填充以使文本離開邊界，第三個div移動到下一行。 任何建議，以保持填充，但所有3在一行將不勝感激。

代碼：

CSS：

.container { 
    padding-top: 53px; 
    width:100%; 
} 

.table1{ 
    border-style: solid; 
    border-width: 2px; 
    float: left; 
    width: 33.3%; 
    text-align: justify; 
    padding-left: 3px; 
    padding-right: 3px; 
    background-color: gray; 
} 

.table2{ 
    border-style: solid; 
    border-width: 2px; 
    border-left: 0px; 
    border-right: 0px; 
    float: left; 
    width: 33.3%; 
    text-align: justify; 
    padding-left: 3px; 
    padding-right: 3px; 
} 

.table3{ 
    border-style: solid; 
    border-width: 2px; 
    float: left; 
    width: 33.3%; 
    text-align: justify; 
    padding-left: 3px; 
    padding-right: 3px; 
} 

HTML：

<div class="container"> 
    <div class="table1"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div class="table2"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div class="table3"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

Answer 1

使得padding/border包含在它的高度/寬度計算你可以添加box-sizing: border-box的元素：

.table1, .table2, .table3 { 
    box-sizing: border-box; 
} 

我建議增加一個共同的類表，以及：

Example Here

.table { 
    width: 33.33%; 
    box-sizing: border-box; 
} 

Answer 2

使用display: table和table-layout: fixed的容器和display: table-cell爲列：

.container { 
    display: table; 
    table-layout: fixed; /* For equal column widths regardless of their number. */ 
    width: 100%; 
} 

.container > DIV { 
    display: table-cell; 
} 

與彩車，這種方法可以保證在柱子之間和容器的每一側之間沒有間隙。

與Flexbox（IE10 +）不同，它適用於IE8 +。

Answer 3

或者，您可以修改代碼一點，並利用CSS的calc()功能象下面這樣：

width: calc(33.3% - 10px); 

如果每個div寬度爲33.3% - （3px填充左+ 3px填充右+ 2px邊框左寬度+ 2px border right width） - ，因爲填充和邊框會將元素寬度值添加到元素寬度 - 。

這對.table1和table3，但中間.table2 DIV沒有border-right也不border-left寬度值，因此它，而不是隻6px10px

還你的冗餘代碼ltos所以我簡化了一點JS Fiddle

.container { 
 
    padding-top: 53px; 
 
    width:100%; 
 
} 
 

 
.table1, .table2, .table3{ 
 
    border:2px solid; 
 
    float: left; 
 
    padding: 0 3px; 
 
    width: calc(33.3% - 10px); 
 
    text-align: justify; 
 
} 
 
.table1{ 
 
    background-color: gray; 
 
} 
 

 
.table2{ 
 
    border:none; 
 
    border-top:2px solid; 
 
    border-bottom:2px solid; 
 
    width: calc(33.3% - 6px); 
 
}

<div class="container"> 
 
     <div class="table1"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
     <div class="table2"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
     <div class="table3"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div>

Answer 4

Flexbox的工作：進行以下操作：

申請重置：

html, 
    body { 
    box-sizing: border-box; 
} 
*, 
*:before, 
*:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: none; 
} 

讓.container Flex容器：

.container { 
    padding-top: 53px; 
    width: 100%; 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: flex-start; 
} 

應用此每個孩子（例如.table1，等...）：

flex: 1 0 auto; 

浮動不柔性流動的環境中工作，這樣你就可以刪除所有float: left。額外的獎勵是你的列高度和寬度匹配。如果需要排水溝（如報紙之間的空間），請將flex-start替換爲space-between，並在必要時減小寬度。

html, 
 
body { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: none; 
 
} 
 
.container { 
 
    padding-top: 53px; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: flex-start; 
 
} 
 
.table1 { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    text-align: justify; 
 
    width: 33.3%; 
 
    padding-left: 3px; 
 
    padding-right: 3px; 
 
    background-color: gray; 
 
    flex: 1 0 auto; 
 
} 
 
.table2 { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-left: 0px; 
 
    border-right: 0px; 
 
    text-align: justify; 
 
    width: 33.3%; 
 
    padding-left: 3px; 
 
    padding-right: 3px; 
 
    flex: 1 0 auto; 
 
} 
 
.table3 { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    text-align: justify; 
 
    width: 33.3%; 
 
    padding-left: 3px; 
 
    padding-right: 53px; 
 
    flex: 1 0 auto; 
 
}

<p>I have added an extra 50px to .table3 to demonstrate that all columns maintain a 33.33% width.</p> 
 

 
<div class="container"> 
 
    <div class="table1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="table2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="table3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>