html - 在站点两侧创建两个 div 列

Question

黑条应该紧贴页面边缘，“设计”了 HTML/CSS 手机应用程序中的黑条，它们在边缘完美对齐。 (注意长度是临时的)

<div id="leftcolumn"></div>
<div class="middlecontent" align="left">Middle content</div>
<div id="rightcolumn"></div>

样式表

.middlecontent {
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 15%;
    height: 200px;
    box-sizing: content-box;
    display: inline;

}   
#leftcolumn {
    float: left;
    height: 200px;
    width: 15%;
    background-color: #11151C;
    box-sizing: border-box;
    display: inline;

}
#rightcolumn {
    float: right;
    height: 200px;
    width: 15%;
    background-color: #11151C;
    box-sizing: border-box;
    display: inline;

}

Answer 1

如评论中所述，您不能同时使用 display: inline 和 float。

此外，box-sizing: content-box 已经是默认的 box-sizing，除非您指定宽度，否则没有用。

如果行中没有足够的空间可占用，float: right 总是跳到换行符。

我建议改为使用 display: flex。

并尝试精简您的代码。

.container{
  display:flex;
}

#leftcolumn, #rightcolumn {
    height: 200px;
    width: 15%;
    background-color: #11151C;
    box-sizing: border-box;
}
#rightcolumn{
  margin-left:auto;
}
.middlecontent{
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 15%;
    height: 200px;
}
/*.middlecontent {
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 15%;
    height: 200px;
    box-sizing: content-box;
    display: inline;

}   
#leftcolumn {
    float: left;
    height: 200px;
    width: 15%;
    background-color: #11151C;
    box-sizing: border-box;
    display: inline;

}
#rightcolumn {
    float: right;
    height: 200px;
    width: 15%;
    background-color: #11151C;
    box-sizing: border-box;
    display: inline;

}*/

<div class='container'>
<div id="leftcolumn"></div>
<div class="middlecontent" align="left">Middle content</div>
<div id="rightcolumn"></div>
</div>