logo标签列表

100%宽度分为3个33%的div

htmlcss
3
我将翻译以下内容：

我一直在尝试使用3个

元素来模拟表格，所以我想用3个占据33%的
元素来创建3列。这样做很好，它们填满了页面，但是当我想添加内边距使文本移开边框时，第三个
元素就会移动到下一行。 如果有任何建议如何保持内边距同时让这3个元素在同一行中，将不胜感激。

代码:

CSS:

.container {
   padding-top: 53px;
   width:100%;
}

.table1{
   border-style: solid;
   border-width: 2px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
   background-color: gray;
}

.table2{
   border-style: solid;
   border-width: 2px;
   border-left: 0px;
   border-right: 0px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
}

.table3{
   border-style: solid;
   border-width: 2px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
}

HTML:

<div class="container">
  <div class="table1">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
  <div class="table2">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
  <div class="table3">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
</div>
4个回答
5

您可以为元素添加box-sizing: border-box属性，这样padding/border将被计算在元素的高度/宽度内：

.table1, .table2, .table3 {
  box-sizing: border-box;
}

我建议同时为表格添加一个常见的类：

这里有一个示例

.table {
  width: 33.33%;
  box-sizing: border-box;
}
这就是大多数使用基于百分比列的 CSS 框架（Bootstrap < v4.0）如何实现的。 - MattSizzle
@MattSizzle 是的。事实上，Bootstrap 3使用通用选择器*将box-sizing: border-box添加到所有元素中。这是一种非常普遍的做法。http://www.paulirish.com/2012/box-sizing-border-box-ftw/ - Josh Crozier
3

使用 display: table 和 table-layout: fixed 作为容器样式，使用 display: table-cell 来设置列：

.container {
    display: table;
    table-layout: fixed; /* For equal column widths regardless of their number. */
    width: 100%;
}

.container > DIV {
    display: table-cell;
}

与浮动不同的是，这种方法保证在容器两侧和列之间没有任何间隙。

与Flexbox（IE10+）不同，它适用于IE8+。

我更喜欢使用表格显示属性，这种方法让我遇到的问题要少得多。 - MattSizzle
1

或者，您可以稍微修改代码，并使用CSS calc()函数，如下所示：

width: calc(33.3% - 10px);

每个
的宽度都是33.3% - （3px左填充 + 3px右填充 + 2px左边框宽度 + 2px右边框宽度）- 因为填充和边框会给元素宽度增加值。
这适用于.table1和table3，但对于中间的.table2 div，没有border-right或border-left宽度值，因此只有6px而不是10px。
另外，您有很多冗余代码，所以我稍微简化了一下JS Fiddle。 

.container {
   padding-top: 53px;
   width:100%;
}

.table1, .table2, .table3{
   border:2px solid;
   float: left;
   padding: 0 3px;
   width: calc(33.3% - 10px);
   text-align: justify;
}
.table1{
  background-color: gray;
}

.table2{
   border:none;
   border-top:2px solid;
   border-bottom:2px solid;
   width: calc(33.3% - 6px);
}
<div class="container">
      <div class="table1">
         Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </div>
      <div class="table2">
         Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </div>
      <div class="table3">
         Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </div>
   </div>

0

Flexbox工作原理：请执行以下操作：

应用重置：

  html,
  body {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}

将 .container 设为弹性容器：

.container {
  padding-top: 53px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

将此应用于每个子元素（例如.table1等）：
flex: 1 0 auto;

在 flex flow 环境中，浮动不起作用，因此您可以删除所有的 float: left。额外的好处是您的列在高度和宽度上也匹配。如果您想要间距（例如报纸中的列之间的空间），请将 flex-start 替换为 space-between 并根据需要减小宽度。

html,
body {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
.container {
  padding-top: 53px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.table1 {
  border-style: solid;
  border-width: 2px;
  text-align: justify;
  width: 33.3%;
  padding-left: 3px;
  padding-right: 3px;
  background-color: gray;
  flex: 1 0 auto;
}
.table2 {
  border-style: solid;
  border-width: 2px;
  border-left: 0px;
  border-right: 0px;
  text-align: justify;
  width: 33.3%;
  padding-left: 3px;
  padding-right: 3px;
  flex: 1 0 auto;
}
.table3 {
  border-style: solid;
  border-width: 2px;
  text-align: justify;
  width: 33.3%;
  padding-left: 3px;
  padding-right: 53px;
  flex: 1 0 auto;
}
<p>I have added an extra 50px to .table3 to demonstrate that all columns maintain a 33.33% width.</p>

<div class="container">
  <div class="table1">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
  <div class="table2">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
  <div class="table3">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接