代码之家 › 专栏 › 技术社区 › LKG

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

css html

LKG · 技术社区 · 8 年前

如何设置div width border:2px solid 边框来自父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;
}

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

5 回复 | 直到 8 年前

M K 8 年前

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

Super User 8 年前

只需添加 display: block; 到该分区。检查下面更新的代码段

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

codesayan 8 年前

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>

curveball 8 年前

只需添加 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>

不要耍花招。注意,添加 *, *:before, *:after 如上所示,可能会破坏布局的其他部分。

Abdul Basit 7 年前

只需添加框大小:边框框;到class=“two”这样:

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

推荐文章