html - 删除空白和粘性 div 边缘？

Question

我在 .boxwrap 和 .lsmlbox + .rsmlbox 之间的嵌套 div 中添加了不必要的空格，这使得无法将 .smlbox + .rsmlbox 与 .box 对齐我相信这是一个比预期更难解决的问题？

我希望 .lsmlbox 和 .rsmlbox 的“内部”(指屏幕中心)边距取决于屏幕尺寸，但我希望外边框始终保持“粘性”到 .boxwrap 以便当屏幕尺寸发生变化时，框只会变窄，但会保持与上面的全尺寸 .box div 对齐。

.box
{
margin-left:5%;
margin-right:5%;
margin-bottom:80px;
}

.boxheader
{
font-size:17pt;
letter-spacing:3px;
padding-bottom:10px;
text-transform:capitalize;
}

.boxcontent
{
text-align:left;
border: 1px dotted #000000;
border-top: 0px;
border-bottom: 0px;
padding-left:15px;
padding-right:15px;
letter-spacing:3px;
}


.boxwrap
{
margin:0 5%;
}

.lsmlbox
{
display:inline-block;
max-width: 30%;
margin-bottom:80px;
margin-right:4%;
vertical-align:top;
}

.rsmlbox
{
display:inline-block;
max-width:30%;
margin-bottom:80px;
margin-left:4%;
vertical-align:top;
}

HTML:

<div class="box">
<div class="boxheader">SLDKFJSDLFKJSDLKJF.</div>
<div class="boxcontent">
SDFSDFLSDFSDFLKJ
</div>
</div></div>

<div class="boxwrap">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">SDFSDFSDF</div></div>

<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDFSDF
</div></div>
</div>

编辑:摆脱了 float div，但现在我遇到了更深层次的问题。

Answer 1

这真的取决于你想要它做什么，但你可以使用:

display: inline-block;

在同一行上你想要的每个元素