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和邊界問題

回答

相關問題