CSS的float和边界问题

我得到这个CSS：CSS的float和边界问题

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

demo

但DIV post-user会境外。

我该如何解决它？（PS：它的东西类似论坛的布局）

来源

2011-09-02 kritya

无论安德鲁和Ben的答案将工作，都有自己的缺点。这也不是一蹴而就的解决方案，所以在这里做出一个有教养的决定，你想采取什么样的道路。 – AlienWebguy

我喜欢安德鲁的 – kritya

@benjamin啊它不是那么容易，你必须等待一定的时间。那时我不能接受。 – kritya

http://jsfiddle.net/PGFTz/5/我在post-user后添加了一个明确的修复方法，允许它留在包装盒内。

来源

2011-09-02 18:31:08

添加overflow:hidden您.main-box CSS

广泛explenation如何以及为什么它可以在这里

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

一个伟大的指导发现为浮动的工作可以在这里找到：

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

来源

2011-09-02 18:27:11

对不起，这个答案完美的罚款，但我不能得到scorllers，如果我想。所以生病使用清楚。谢谢生病+1：D – kritya

你可以改变float:left到text-align:left

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

为我工作=）

来源

2011-09-02 18:33:57 jadarnel27

是的，这确实很好：>锋利。我很习惯大多数元素都是浮动的，我提出了溢出：默认情况下隐藏固定，但在这种情况下，只有后用户浮动 –

@Benjamin：哈，谢谢你。我尝试使用'text-align'的时候，因为它可以让我更容易理解。当有太多的东西在“漂浮”时，我开始感到困惑。 – jadarnel27

但是文本默认保持对齐状态，所以不能替换浮动但只是删除它，也可以解决问题。但后用户将采取整个宽度，而不是只需要它的宽度来保存文本 –

CSS的float和边界问题

回答

相关问题