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>

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

Answer 1

这实际上取决于你想要它，但你可以使用：

display: inline-block;

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

Answer 2

这取决于。在某些情况下漂浮是好的。

在某些 - 内联块中。我个人喜欢inline-block。

您可以在此处详细了解http://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://jsbin.com/qikubuce/1/edit?html,css - 示例

Answer 3

您也可以使用position:absolute;。对于您的情况，只需删除float和.lsmlbox中的.rsmlbox，然后将其放入.rsmlbox：

.rsmlbox
{
position:absolute;
top:8px;
left:700px;
margin-right:20%;
width:27.5%;
margin-bottom:80px;
}

希望这有帮助！

Answer 4

您可以通过将代码包装在容器中来使用float而不会破坏布局。

CSS

.clearfix {
    position:relative;  
}
.clearfix:after {
    content: "&nbsp;";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

HTML

<div class="clearfix">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">
SDFSDFSDFSF
</div></div>

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

Answer 5

是的，显示块是更好的方法。 Float最初用于图像。演示使用内联块

的Here is a fiddle

我为这两个方框添加了一个类名，并将其当前的类名改为ID：

.box{display:inline-block;}
#lsmlbox{}
#rsmlbox{}

通过为这两个框使用一个类名将有助于减少编写重复规则的需要。

您可能想要做的另一件事是将内部<div>'s更改为段落。然后，您可以使用以下css为它们定义标准规则：

.box p{padding:10px;color:#333;etc....}

这是updated fiddle证明了这一点。

希望这有帮助。

删除空白区域和粘性div边缘？

5 个答案: