修正幅のdivにボーダーを持つdivの幅を設定する方法

Question

私は国境が親のdivから出てくる border:2px solidでのdiv widthを設定するにはどうすればよい

注： - 私もIEで修正したいと思います。

例を掲載することにより、より控えめに説明しています。

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

ちょうどそのDIVにdisplay: block;を追加します。 box-sizingプロパティは、あなたの問題をsloveすることができ、これを試してみてください

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

の下に更新スニペットを確認してください。

*, *: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 3

ちょうどこのよう.twoに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; 
 
    box-sizing: border-box; 
 
}

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

ない空想のトリック。上記のようにを*, *:before, *:afterに追加すると、レイアウトの他の部分が壊れることがあります。

Answer 4

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

<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: 296px; 
border: 2px solid; 
height: 40px; 

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

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

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

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

}