在站点的两侧创建两个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已经是默认的盒子大小，除非你指定宽度，否则它是没用的。

如果行中没有足够的空间占用，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>

Answer 2

您可以尝试使用CSS网格。我将你的HTML包装在带有类网格的div中。并从类中删除边距并使用网格。此外，删除浮动并显示：内联。我注意到你使用了margin-top：15％，也许你有理由，但我只给了顶级自动，所以它符合你内容的大小。最后，我添加了margin：auto 0;对身体来说，以防止身体上的边缘。

HTML：

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

CSS：

body {
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: 15% auto 15%;
  grid-template-rows: auto auto;
}
.top {
  background: pink;
  grid-column: 1/-1;
  grid-row: 1;
}
.middlecontent {
  grid-column: 2/3;
  grid-row: 2;
  height: 200px;
}   
#leftcolumn {
  grid-column: 1/2;
  grid-row: 2;
  height: 200px;
  background-color: #11151C;
}
#rightcolumn {
  grid-column: 3/4;
  grid-row: 2;
  height: 200px;
  background-color: #11151C
}