如何使用寬度調整邊距和填充百分比？

所以我寫了這個代碼，設置每個框的寬度，以33.33％

/* Base style */ 
 

 
h1 { 
 
    text-align: center; 
 
} 
 
.row { 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 10px; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
    font-family: sans-serif; 
 
    margin: 0px; 
 
} 
 
div > div { 
 
    background-color: gray; 
 
    border: 1px solid; 
 
    float: left; 
 
} 
 
.dummy_text { 
 
    clear: right; 
 
    padding: 10px; 
 
} 
 
/* Top right paragraphs*/ 
 

 
#chiken { 
 
    float: right; 
 
    background-color: pink; 
 
    border: 2px solid; 
 
    width: 150px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    position: relative; 
 
    left: 1px; 
 
    padding: 5px; 
 
} 
 
#beef { 
 
    float: right; 
 
    background-color: indianred; 
 
    color: white; 
 
    border: 2px solid black; 
 
    width: 150px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    left: 1px; 
 
    padding: 5px; 
 
} 
 
#sushi { 
 
    float: right; 
 
    background-color: lightgoldenrodyellow; 
 
    border: 2px solid; 
 
    width: 150px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    left: 1px; 
 
    padding: 5px; 
 
} 
 
/* Desktop */ 
 

 
@media (min-width: 992px) { 
 
    .col-dsk-3 { 
 
    float: left; 
 
    width: 33.33%; 
 
    } 
 
}

<h1>Our menu</h1> 
 

 
<div class="row"> 
 
    <div class="col-dsk-3 col-tbl-2 col-mbl-1"> 
 
    <p id="chiken">Chicken 
 
     <p> 
 
     <p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> 
 
    </div> 
 
    <div class="col-dsk-3 col-tbl-2 col-mbl-1"> 
 
    <p id="beef">Beef 
 
     <p> 
 
     <p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> 
 
    </div> 
 
    <div class="col-dsk-3 col-tbl-1 col-mbl-1"> 
 
    <p id="sushi">Sushi 
 
     <p> 
 
     <p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> 
 
    </div> 
 
</div>

而且結果是這樣的：

事情是我需要段落之間的間距，所以我雖然是在框中添加一些餘量，但是當我添加10px時，結果是三個框中的一個轉到一條新線，但我需要三條線。

這就是我所做的補充保證金，我修改DIV> DIV部分是這樣的：

div > div { 
    background-color: gray; 
    border: 1px solid; 
    float: left; 
    margin-left: 10px; 
}

然後導致：

來源

2016-09-27 ravelinx

對所有佈局寬度使用％值。使用：最後一個孩子設置右div的邊距爲零。

div > div { 
    background-color: gray; 
    border: 1px solid; 
    float: left; 
    margin-right: 2% 
} 

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

/* Desktop */ 
@media (min-width: 992px) { 
    .col-dsk-3 { 
     float: left; 
     width: 32%; 
    } 
}

這裏有一個codepen：http://codepen.io/prime8/pen/LRympm

來源

2016-09-27 01:59:29 prime8

您使用百分比來定義寬度，但將絕對值添加到邊距。你的寬度加起來（幾乎）100％，但是你增加了更多的邊距，導致超過100％，因此這個值大於可用的空間。調整您的利潤率以使用百分比，並確保最終達到100％或更低。

來源

2016-09-27 01:50:17

與

.col-dsk-3 { 
    float: left; 
    width: calc(33.33% - 20px); 
    margin-right: 10px; 
} 
.col-dsk-3:last-child { 
    margin-right: 0px; 
}

但我建議你使用flexbox代替

使用 calc

來源

2016-09-27 01:55:04

當添加margin-left: 10px到你正在它們的寬度大於33.33％，這導致了大於100％，每個段落推倒最後一段。

就像CSS中的所有東西一樣，有幾種不同的方法可以解決這個問題，但最簡單和最直接的答案就是使用CSS函數calc。 calc函數使用基本的數學運算在CSS中計算數值。

使用計算功能則可以設置每一段的寬度爲：

width: calc(33.33% - 10px);

，這將導致在100％配合。

來源

2016-09-27 01:55:14

有很多的事情可以做這件事。
1 - 使用calc來減少當前設置爲33的元素的寬度。通過10px的33％，並使用10px的邊距：

.col-dsk-3 { 
    float: left; 
    width: calc(33.33% - 10px); 
    margin-right: 10px; 
}

2 - 裹在另一個元素的列的內容，並應用填充，以您的列：

<div class="col-dsk-3 col-tbl-2 col-mbl-1"> 
    <div class="column-content"> 
    <p id="chiken">Chicken<p> 
    <p class="dummy_text">Lorem ipsum dolor sit....</p> 
    </div> 
</div> 

.column-content { 
    background-color: gray; 
} 

.col-dsk-3 { 
    float: left; 
    width: 33.33%; 
    padding: 10px; 
    background: none; 
}

3 - 利用Flexbox的，而不是漂浮爲您的專欄。刪除浮動和width: 33.33%，並添加：

.row { 
    display: flex; 
    flex-direction: row; 
} 
.col-dsk-3 { 
    margin: 10px; 
}

來源

2016-09-27 02:03:24 danyamachine

試試這個。在HTML中使用額外的div包裝。
這種方式有很好的兼容性。

/* Base style */ 
 

 
h1 { 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 10px; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    font-family: sans-serif; 
 
    margin: 0px; 
 
} 
 

 
/* NOTE: `.row > div > div` is better than `div > div > div` */ 
 
div > div > div { /* changed */ 
 
    background-color: gray; 
 
    border: 1px solid; 
 
    float: left; 
 
} 
 

 
.row > div > div { /* changed */ 
 
    margin: 0 10px; 
 
} 
 

 
.dummy_text { 
 
    clear:right; 
 
    padding: 10px; 
 
} 
 

 
/* Top right paragraphs*/ 
 

 
#chiken { 
 
    float: right; 
 
    background-color: pink; 
 
    border: 2px solid; 
 
    width: 150px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    position: relative; 
 
    left: 1px; 
 
    padding: 5px; 
 
} 
 

 
#beef { 
 
    float: right; 
 
    background-color: indianred; 
 
    color: white; 
 
    border: 2px solid black; 
 
    width: 150px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    left: 1px; 
 
    padding: 5px; 
 
} 
 

 
#sushi { 
 
    float: right; 
 
    background-color: lightgoldenrodyellow; 
 
    border: 2px solid; 
 
    width: 150px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    left: 1px; 
 
    padding: 5px; 
 
} 
 

 
/* Desktop */ 
 
@media (min-width: 992px) { 
 
    .col-dsk-3 { 
 
     float: left; 
 
     width: 33.33%; 
 
    } 
 
}

<h1>Our menu</h1> 
 

 
<div class="row"> 
 
    <div class="col-dsk-3 col-tbl-2 col-mbl-1"> 
 
     <div> 
 
      <p id="chiken">Chicken<p> 
 
      <p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-dsk-3 col-tbl-2 col-mbl-1"> 
 
     <div> 
 
      <p id="beef">Beef<p> 
 
      <p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-dsk-3 col-tbl-1 col-mbl-1"> 
 
     <div> 
 
      <p id="sushi">Sushi<p> 
 
      <p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-09-27 02:08:47

如何使用寬度調整邊距和填充百分比？

回答

相關問題