Question

所以我想用css和html实现这个目标

所以我编写了这段代码，将每个方框的宽度设置为33.33％

＆＃13;

/* 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%;
  }
}

＆＃13;

 <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>

＆＃13;

结果如下：

问题是我需要段落之间的间距，所以我要在框中添加一些边距，事情就是当我添加10px时，结果是三个框中的一个变为新的但是我需要同一行中的三个。

这是我做的添加保证金，我修改了div＆gt; div部分是这样的：

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

然后结果：

Answer 1

对所有布局宽度使用％值。使用：last-child 将右侧div的边距设置为零。

MIN[0.0]

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

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

你可以做很多事情。
1 - 使用calc将当前设置的元素宽度减少到10.3x的33.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;
}

Answer 5

使用百分比来定义宽度，但是为边距添加绝对值。您的宽度加起来（几乎）为100％，但是您添加了更多的边距，导致超过100％，因此值大于可用空间。调整边距以使用百分比，并确保最终达到100％或更低。

Answer 6

试试这个。在HTML中使用其他div包装器这种方式具有良好的兼容性。

＆＃13;

/* 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%;
    }
}

＆＃13;

<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>

＆＃13;

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

6 个答案: