CSS Wordwrap無法按預期方式工作

基於我以前的thread我試圖使用並理解推薦的方法來使用溢出元素水平對齊兩個div。CSS Wordwrap無法按預期方式工作

用我的短文本兩個div對齊正確，但是當我添加獨立文本時，它會落在圖像下方。任何人都可以解釋爲什麼會發生這種情況，我該如何解決它？

HTML：

<div class="container" style="overflow: hidden; width: 100%"> 
<div class="left"> 
    <img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" /> 
</div> 
<div class="right"> 
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div> 
</div> 
</div>

CSS：

div.container { 
border: 1px solid #000000; 
overflow: hidden; 
width: 100%; 
} 

div.left { 
padding:5px; 
float: left; 
} 

div.right { 
float: left; 
} 

.thumb-small{ 
width:35px; 
height:35px; 
border: 1px solid #B6BCBF; 
}

來源

2013-04-15 Paul

什麼不工作？你可以發佈所需佈局的打印屏幕嗎？ – Aprillion

看看我的JSFiddle。我期望更長的文本垂直對齊到右邊的div的頂部，但它不需要指定寬度 – Paul

。結帳這個小提琴：http://jsfiddle.net/JVhQB/4/ – karthikr

花車擴大，試圖涵蓋的內容。無論它們的位置如何，它們通常會擴大到包含區域的寬度。這就是爲什麼當文本真的很長的時候它會到一個新的臺階。

對於你在做什麼，我相信你想要的圖像在一些文本的左側。這是通過外部區域設置與clearfix CSS做（總是涵蓋所有彩車）：

.container { 
    overflow: hidden; 
    min-width: 1px; 
} 
/* IE7+ */ 
*+html .container { 
    min-height: 1%; 
}

然後，只有浮動圖像左側。不要浮動您的內容。根據需要在圖像周圍添加邊距。所以像這樣的：

.left { 
    float: left; 
    margin: 0 10px 10px 0; /* 10px on right and bottom */ 
}

div中的內容然後就像你期待的那樣。

來源

2013-04-15 16:01:51

刪除長文本上的浮動規則（jsFiddle example）。當en元素在另一個浮動元素之後浮動時，它不能垂直前進。

<div> 
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div> 
</div>

見W3爲長版本：

浮動框的外頂可能並不比任何塊的外頂或由元件產生先前在浮動框更高源文件。

來源

2013-04-15 16:02:20 j08691

你必須設置最大寬度屬性來限制你的文本形式佔用儘可能多的空間，並獲得最大的空間，它將轉到下一行。

http://jsfiddle.net/a6BbD/1/

<div class="container" style="overflow: hidden; width: 100%"> 
    <div class="left"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" /> 
    </div> 
    <div class="right"> 
    <div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div> 
    </div> 
</div> 

<br> 

<div class="container" style="overflow: hidden; width: 100%"> 
    <div class="left"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" /> 
    </div> 
    <div class="right"> 
    <div style="word-wrap: break-word;">Some short text here</div> 
    </div> 
</div>

來源

2013-04-15 16:02:30

刪除該規則的float:left;，它會工作。但是，你可能想要改進和測試ie 6+。

來源

2013-04-15 16:04:55 m33bo

建議您應該始終在浮動元素上設置寬度。下面的鏈接有很大的理解花車的材料..

 http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

來源

2013-04-15 16:33:54

CSS Wordwrap無法按預期方式工作

回答

相關問題