如何设置边境一个div宽度固定宽度的div

如何设置一个div width与border:2px solid边境从父DIV出来如何设置边境一个div宽度固定宽度的div

注： - 我想在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>

来源

2017-08-29 LKG

那么只是删除宽度然后（DIV为块元件自动进行全宽，所以在这种情况下它不是必需的） - o r阅读'box-sizing'属性。 – CBroe

你的问题很难理解。请添加更多信息。 –

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

来源

2017-08-29 11:01:55

为什么你需要将'display：block'添加到div？ div是一个块元素。你的代码工作，因为你已经删除了'width：100％' – Turnip

@Super用户我会接受你的答案，因为它的工作原理，并且不需要为IE编写任何css ..感谢buddy .. – LKG

试试这个，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>

来源

2017-08-29 11:02:08 codesayan

只需添加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可能会破坏布局的其他部分。

来源

2017-08-29 11:04:25 curveball

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

来源

2017-08-29 11:04:31

-1

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

}

来源

2017-08-29 11:26:01

如何设置边境一个div宽度固定宽度的div

回答

相关问题