Html 50%宽度不工作

我正在尝试创建两个div，它们的宽度大小为父级的50%，并且彼此相邻。但是，它们需要有一个2px的边界。我试图保持它的响应性，并保持一定的宽度百分比

由于某些原因，它们没有相邻对齐。即使我移除了边界，它们仍然不是相邻的

HTML:

---

尝试边距自动、浮动和49%宽度

您的问题是填充，请尝试：

padding: 5px 0;

---

这里是

宽度

，默认情况下，不考虑

边框

或

填充

。如果希望宽度包含这些属性，请设置

框大小：边框框

---

<代码>框大小：边框框在将绝对值（例如，

px

）与相对值（例如，

%

）混合使用时特别有用。

如果我正确理解您的问题，最好为选项卡提供唯一的id，以便您可以应用

浮动：左

一个选项卡，然后是

float:right

另一个。

默认情况下，宽度不考虑边框或填充。如果希望宽度包含这些属性，请设置“框大小：边框框”

试试这个，也许会有所帮助

.box1 {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.box2 {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

HTML

第一箱第二箱

您已声明“显示”两次，一次为“内联框”，另一次为“内联块”“内联框”不是有效的css显示类型。

padding: 5px 0;

.box1 {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.box2 {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

<div class="container">
    <div class="box1">First Box</div><div class="box2">Second Box</div> 
</div>