如何在固定宽度div中设置带边框的div宽度

Question

如何设置div width，border:2px solid边框来自父div

注意： - 我也想在IE中修复。

发布一个示例以更好地低估。

＆＃13;

＆＃13;

.box {
  width: 300px;
  border: 1px solid;
  padding: 10px 0;
}

.one {
  width: 100%;
  background: tomato;
  height: 40px;
}

.two {
  width: 100%;
  border: 2px solid;
  height: 40px;
}

＆＃13;

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.box {
  width: 300px;
  border: 1px solid;
  padding: 10px 0;
}

.one {
  width: 100%;
  background: tomato;
  height: 40px;
}

.two {
  width: 100%;
  border: 2px solid;
  height: 40px;
 box-sizing: border-box;
}

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
</div>

Answer 2

只需将display: block;添加到该div即可。检查下面的更新代码段

.box {
  width: 300px;
  border: 1px solid;
  padding: 10px 0;
}

.one {
  width: 100%;
  background: tomato;
  height: 40px;
}

.two {
  display: block;
  border: 2px solid;
  height: 40px;
}

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
</div>

Answer 3

试试这个，box-sizing属性可以解决您的问题。

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.box {
  width: 300px;
  border: 1px solid;
  padding: 10px 0;
}

.one {
  width: 100%;
  background: tomato;
  height: 40px;
}

.two {
  width: 100%;
  border: 2px solid;
  height: 40px;
}

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
</div>

Answer 4

只需将box-sizing: border-box;添加到.two，就像这样：

.box {
  width: 300px;
  border: 1px solid;
  padding: 10px 0;
}
.one {
  width: 100%;
  background: tomato;
  height: 40px;
}

.two {
  width: 100%;
  border: 2px solid;
  height: 40px;
  box-sizing: border-box;
}

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
</div>

没有花哨的技巧。请注意，如上所示，将box-sizing: border-box;添加到*, *:before, *:after可能会破坏布局的其他部分。

Answer 5

只需添加box-sizing：border-box; to class =＆＃34; two＆＃34;像这样：

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
</div>

.box {
  width: 300px;
  border: 1px solid;
  padding: 10px 0;
}

.one {
 width: 100%;
 background: tomato;
 height: 40px;
}

.two {
 width: 100%;
 border: 2px solid;
 height: 40px;
 box-sizing: border-box;
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
}