Question

我一直试图像桌子一样使用3个div，所以为了制作3列，我认为我会做出3个33％的div。这工作正常，他们填充页面，但只要我想添加填充以使文本移出边框，第3个div移动到下一行。任何建议保持填充，但所有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>

Answer 1

您可以向元素添加box-sizing: border-box，以便padding / border包含在其高度/宽度计算中：

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

我建议在表格中添加一个公共类：

Example Here

.table {
  width: 33.33%;
  box-sizing: border-box;
}

Answer 2

对容器使用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 +。

Answer 3

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

width: calc(33.3% - 10px);

每个div宽度为33.3% - （3px左侧填充+ 3px填充右侧+ 2px边框左侧宽度+ 2px边框右边宽度） - 因为填充和边框会为元素宽度添加值 - 。

这适用于.table1和table3，但对于中间.table2 div，没有border-right或border-left宽度值，因此它只有{{1}而不是6px

你也有冗余代码，所以我简化了一点JS Fiddle

10px

.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);
}

Answer 4

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

应用重置：

[42] pry(main)> DB[:litigation_cached_inputs].update(nature_of_suit: j.extract('NatureOfSuitID'))
2015-12-14T14:31:23-05:00 [DEBUG] 633 :   Sequel::Postgres::Database (3.3ms)  UPDATE "litigation_cached_inputs" SET "nature_of_suit" = jsonb_extract_path("metadata", 'NatureOfSuitID')
Sequel::DatabaseError: PG::DatatypeMismatch: ERROR:  column "nature_of_suit" is of type integer but expression is of type jsonb

使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

Floats不能在弹性流环境中工作，因此您可以删除所有flex: 1 0 auto;。额外的好处是你的列在高度和宽度上匹配。如果您想要排水沟（列之间的空间像报纸一样），请将float: left替换为flex-start，并在必要时减小宽度。

＆＃13;

space-between

＆＃13;

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

＆＃13;

100％宽度分为3 * 33％div

4 个答案: