爲什麼文本不與頂部對齊？

我在浮動到右側的div中有一個文本塊。 div應該對齊頂端，但它已經下降了大約100px。看到旁邊的紅色花的文本框在這裏：http://174.121.46.122/~flowerwo/inside.html 爲什麼文本不與頂部對齊？

我試過絕對定位，但當我做背景圖像消失。它應該很明顯是文本需要的地方，但它不會正確對齊。

下面是HTML：

<div id="small-box"> 
<div id="small-box-top"> 
<div id="small-box-bot"> 
<div id="text-box"> 
<h3><a href="#">Headline</a></h3> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</div> 
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" /> 
</div> 
</div> 
</div><!-- end small box -->

這裏是CSS：

#small-box { 
    width: 625px; 
    position: relative; 
    margin: 10px 0 0 5px; 
    background: url(../_images/bg_small-box-mid.jpg) repeat-y; } 
#small-box-top   { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; } 
#small-box-bot   { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; } 

img.small-box-photo  { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; } 
#text-box

任何得到這個正確對齊頂端幫助將不勝感激。

  { width: 300px; float: right; margin: 0 30px 0 0; }

來源

2011-07-19 fmz

您剛剛發佈了指向您自己的硬盤驅動器的鏈接。它不這樣工作。 –

爲什麼有人會投這個問題？我想如果你投票，你應該評論爲什麼這樣海報知道將來的參考。 – FiveTools

您是否擁有網頁的網址，以便我們完全查看它？ – ysrb

#small-box-bot => display: table; 

img.small-box-photo => float: left;

來源

2011-07-19 13:35:20 bravedick

或display：inline-block，如果你不需要支持舊的IE瀏覽器 – bravedick

它的工作原理是完美的。爲什麼display：table會有所作爲？ – fmz

友好的說話，不知道。只是從經驗中知道。 – bravedick

它確實按照我的預期工作。看看this example。它看起來不像你想要達到的目標嗎？如果不是，請提供更多信息，最好鏈接到我們可以看到問題的在線版本。

在線示例後更新。

所以，在你給的例子，有一個與結算髮生問題時：

的#r-box-lower清除浮動與clear: right
的#r-box-lower坐在同一DOM級別#small-box，含權奇怪移動的文本塊
由於p.1和p.2 #text-box正在清除#r-box-lower，這使得它開始於#r-box-lower開始的地方。

因此，要解決這個問題，你需要用#right-box和r-box-lower到一個共享的div，如：

<div id="right-column" style="float: right; width: 192px"> 
    <div id="right-box"> 
     … 
    </div> 
    <div id="r-box-lower"> 
     … 
    </div> 
</div>

當然，要將這些內嵌樣式移動到你的樣式表。

來源

2011-07-19 12:05:33 spliter

我更正了上面的鏈接。 – fmz

更新了我的答案，@fmz – spliter

我明白你在說什麼了。它是阻止文本的框的劃分。 – fmz

爲什麼文本不與頂部對齊？

回答

相關問題