Question

我试图将两个DIV并排放置，50％都带有边框。我创建了一个Div容器和两个Div容器，它一直有效，直到我放置border属性。

当Border存在时，DIV将呈现两行：

body {
    background-color:cadetblue;
}

#container {
    width: 800px;
}

#divL, #divR {
    width: 50%;
    display: inline-block;
    border: 2px solid black;
}

<body>
    <div id="container">
        <div id="divL">L</div><div id="divR">R</div>
    </div>
</body>

但是当我删除边界规则时，它会按预期工作。

body {
    background-color:cadetblue;
}

#container {
    width: 800px;
}

#divL, #divR {
    width: 50%;
    display: inline-block;
    
}

<body>
    <div id="container">
        <div id="divL">L</div><div id="divR">R</div>
    </div>

如何为divL和divR设置边框？

Answer 1

添加box-sizing: border-box ，因此边框宽度将包含在div的50%宽度中。

body {
  background-color:cadetblue;
}

#container {
  width: 800px;
}

#divL, #divR {
  width: 50%;
  display: inline-block;
  border: 2px solid black;
  box-sizing: border-box;
}

<div id="container">
  <div id="divL">L</div><div id="divR">R</div>
</div>

Answer 2

您使用宽度50％并使用2px宽度的边框

body {
    background-color:cadetblue;
}

#container {
    width: 800px;
}

#divL, #divR {
    width: 49%;
    display: inline-block;
    border: 2px solid black;
}

<body>
    <div id="container">
        <div id="divL">L</div><div id="divR">R</div>
    </div>
</body>

Answer 3

两个人都有50％的人，并且你给了额外的边界。这样

50% + 50% + 2px (border) = 100% ( container ) + 2px ( extra )

但是我们有100％的容器大小，所以需要调整两个div的百分比。

你可以给这两个div提供49％的宽度。

#divL, #divR {
    width: 49%;
    display: inline-block;
    border: 2px solid black;
}

我希望它也能奏效。

CSS border属性会破坏内联块

3 个答案: