我在 .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,但现在我遇到了更深层次的问题。
最佳答案
这真的取决于你想要它做什么,但你可以使用:
display: inline-block;
在同一行上你想要的每个元素
关于html - 删除空白和粘性 div 边缘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23377423/