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

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

对所有布局宽度使用 % 值。使用 :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