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

Question

所以我想用 css 和 html

来实现

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

然后结果：

Answer 1

您使用百分比定义宽度，但将绝对值添加到页边距。您的宽度总计（几乎）100%，但您添加了更多边距，导致超过 100%，因此该值大于可用的 space。调整您的边距以使用百分比，并确保您最终达到 100% 或更少。

Answer 2

将calc用于

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

但我建议你改用flexbox

Answer 3

将 margin-left: 10px 添加到每个段落时，您会使它们的宽度大于 33.33%，这会导致大于 100% 将最后一段向下推。

与 CSS 中的所有内容一样，有几种不同的方法可以解决此问题，但最简单、最直接的答案是使用 calc CSS功能。 calc 函数使用基本数学运算计算 CSS 中的数值。

然后使用 calc 函数可以将每个段落的宽度设置为：

width: calc(33.33% - 10px);

这将导致 100% 拟合。

Answer 4

对所有布局宽度使用 % 值。使用 :last-child 将右边距 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%;
    }
}

这是一个代码笔：http://codepen.io/prime8/pen/LRympm

Answer 5

您可以为此做很多事情。
1 - 使用 calc 将当前设置为 33.33% 的元素宽度减少 10px，并使用 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;
}

Answer 6

试试这个。在 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>

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

how to adjust margin and padding using width with percentage?

html

css

margin