CSS浮动和边框问题

Question

我有这段CSS代码：

.post-user {
    background:black;
    color:white;
    width:auto;
    float:left;
}
.img-side {
     border-style:solid;border-width:medium;width:75px;margin-bottom:2px;
}
.top-head {
    background:cyan;
    width:100%;
    height:20px;
    display:block;
}
.main-box {
    border-style:solid;
    border-width:1px;
    display:block;
    height:auto;
}

而 HTML 看起来是这样的:

<div class="main-box">
    <div>
        <div class="top-head"><span>At top</span>
        </div>
        <div class="side">
            <div class="img-side">
                <img src="http://st2.gsmarena.com/vv/pics/htc/htc-snap-1.jpg" width="75px" height="75px" />
            </div>
        <div class="post-user">User name</div>
        </div>
    </div>
</div>

但是

的位置超出了边框。

我该怎么办？（附：类似于论坛布局）

演示

- kritya

---

Andrew和Ben的答案都可以工作，但两者都有缺点。没有一种是完美的解决方案，因此请根据您想要采取的路径做出明智的决定。 - AlienWebguy

@benjamin 啊，这并不容易，你必须等待一定的时间。那时我无法接受。 - kritya

Answer 1

http://jsfiddle.net/PGFTz/5/ 我在post-user后面添加了一个清除浮动的代码，这样就可以使其保持在框内。

- ayyp

Answer 2

将 overflow:hidden 添加到您的 .main-box css 中

有关其如何以及为什么有效的详细说明可以在此处找到

http://www.quirksmode.org/css/clearing.html

这里有一份关于浮动工作的绝佳指南：

http://www.alistapart.com/articles/css-floats-101/

- Ben

---

很抱歉，这个答案是完全有效的，但如果我想要滚动条，我就无法使用它。所以我会使用clear。谢谢我会+1:D - kritya

Answer 3

您可以将 float:left 更改为 text-align:left。

.post-user { 
background:blue; 
color:white; 
width:auto; 
/*float:left;*/
text-align:left;
} 

那对我有用 =)

- Josh Darnell

---

是的，这确实很好用 :> 尖锐。我习惯于大多数元素都浮动，所以建议默认情况下使用overflow:hidden固定，但在这种情况下只有post-user是浮动的。 - Ben

@Benjamin：哈，谢谢啊。我尽量在能用text-align的时候使用它，因为对我来说更容易理解一些。当有太多东西浮动时，我就开始感到困惑了，哈哈。 - Josh Darnell

文本默认左对齐，因此不替换浮动而仅将其删除也可以解决问题。但是，后续用户将占用整个宽度，而不仅仅是需要容纳文本的宽度。 - Ben

好观点！我最终经常使用text-align:left，因为我继承的所有网站都有内置的text-align:center，我无法更改。所以，我经常会认为center是默认值哈哈。对你的答案加一。 - Josh Darnell