如何使用宽度调整边距和填充百分比？

所以我写了这个代码，设置每个框的宽度，以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

如何使用宽度调整边距和填充百分比？

回答

相关问题