Question

我有主div和里面我有3个div，每个都有百分比的个别宽度。所以我分别有20％，80％和100％的div。到目前为止，与他们合作我意识到，如果我已经将200％的宽度全部放在一起，那么它将浏览器宽度分成两个相等的部分，前半部分被认为是100％而另一个被认为是100％。然后发生其余的百分比分布。我是CSS的新手，但我想明确这一点。我的理解是否正确，这就是为什么我的代码工作正常？这样做有什么不利之处吗？

.main {
  font-size: larger;
  font-weight: bold;
}

.column1 {
  position: relative;
  line-height: 30px;
  width: 20%;
  text-align: left;
}

.column2 {
  width: 80%;
}

.column3 {
  position: relative;
  width: 100%;
  float: right;
  text-align: right;
}

.clear-both {
  clear: both;
}

.row {
  border-width: 2px;
  border-bottom-color: #f4f4f4;
  border-style: none;
  position: relative;
  line-height: 30px;
  border-bottom-style: solid;
  margin-top: 0.2%;
  font-weight: normal;
  font-size: 12px;
  display: flex;
}

<div class="row main">

  <div class="column1">CODE</div>

  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

Answer 1

如果你使用flexbox，它会让你更清楚，而不是使用与float混合的position，

＆＃13;

body {
  margin: 0
}

.main {
  font-size: larger;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
}

.column1 {
  flex: 0 20%;
  background: red
}

.column2 {
  flex: 0 80%;
  background: green
}

.column3 {
  flex: 0 100%;
  background: yellow
}

＆＃13;

<div class="main">
  <div class="column1">CODE</div>
  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

＆＃13;

编辑 OP的评论

我希望这3列成为一行。也在使用我的代码主div的总宽度为200％。有没有打破的可能性如果我以这种方式这样做的话，那就是

你可以这样做：

＆＃13;

body {
  margin: 0
}

.main {
  font-size: larger;
  font-weight: bold;
  display: flex
}

.column1,
.column3 {
  flex: 0 20%;
  background: yellow
}

.column2 {
  flex: 1;
  background: green
}

＆＃13;

<div class="main">
  <div class="column1">CODE</div>
  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

＆＃13;

Answer 2

你做错了。

记住以下事项。

1-父/主div应具有适当的宽度（百分比或像素）。如果您没有指定宽度，则根据宽度的内容自动获取宽度。

2-如果要为子div（column1，column2等）指定宽度百分比，则子div的总和不应超过100％。如果它超过那么你将得不到所需/适当的结果。

3-您需要使用浮点数或显示：inline-block将所有子div /元素放在一行中。

＆＃13;

.main {
  font-size: larger;
  font-weight: bold;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.column1 {
  position: relative;
  line-height: 30px;
  width: 20%;
  text-align: left;
  float: left;
}

.column2 {
  width: 60%;
  float: left;
}

.column3 {
  position: relative;
  width: 20%;
  text-align: right;
  float: left;
}

＆＃13;

<div class="row main">
  <div class="column1">CODE</div>

  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

＆＃13;

如果您使用填充或边框，则可能需要使用 box-sizing：border-box。

Answer 3

您可以使用bootstrap网格系统。

网格系统用于通过一系列创建页面布局容纳内容的行和列。

因此，您可以根据所使用的设备轻松管理布局：

.col-lg *类指的是大型设备。
.col-md *类指的是中型设备。
.col-xs *类指的是小型设备。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2  col-xs-2  bg-warning">CODE</div>
  <div class="col-md-10 col-xs-10 bg-primary">NAME</div>
  <div class="col-md-12 col-xs-12 bg-success">TOTAL</div>
 </div>

＆＃13;

如何将宽度百分比分配给div？

3 个答案: