在.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>


编辑:摆脱了浮动divs,但现在我遇到了一个更深层次的问题。

最佳答案

它确实取决于您想要的用途,但是您可以使用:

display: inline-block;


在同一行上您想要的每个项目上

09-29 19:24