Question

我尝试概述div标签。我使用了border:0.01em solid black，但它不合适。我的脚本在下面

<html>
<body>
<div id="color" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; background:yellow;  float:left;"></div>
<div style="width:50%; height:500px; background:blue; float:left;">    </div>
</div>
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; border:0.01em solid black;  float:left;"></div>
<div style="width:50%; height:500px; border:0.01em solid black; float:left;"></div>
</div>
</body>
</html>

div id = color标签的相等分隔符合100％宽度。

但div id = border标签的相等分隔不适合100％因为我将border添加到seprate div标签中，所以尺寸增加了50％+ 0.01em。

原因div id = border标记的子div标记不适合100％，因此第二个sub div标记从100％下降。

所以我想概述一下 div标签不要边界吗？我该怎么做？但是我希望分开50％而不是减少它。

Answer 1

在标准的盒子模型填充下，边框添加到任何定义的宽度。

如果您将框大小设置为border-box，则声明的宽度包括任何填充＆amp;边界。

它经常被视为通用选择器的一部分：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="border" style="width:100%; height:500px; background:gray;">
  <div style="width:50%; height:500px; border:1px solid black;  float:left;"></div>
  <div style="width:50%; height:500px; border:1px solid black; float:left;"></div>
</div>

Answer 2

请尝试以下代码：

<div id="color" style="width:100%; height:500px; background:gray;border:medium solid">
<div style="border-right: medium solid;  float:left;width:50%; height:500px;"></div>

这适用于您的情况。

Answer 3

这实际上是outline属性的目的：

<div id="border" style="width:100%; height:500px; background:gray;">
    <div style="width:50%; height:500px; outline:0.01em solid black; float:left;"></div>
    <div style="width:50%; height:500px; outline:0.01em solid black; float:left;"></div>
</div>

Answer 4

试

<div style="border-style: solid;border-width: medium;  float:left;width:50%; height:500px;"></div>

如何勾勒div标签？

4 个答案: