爲什麼離開DIV不佔地100％的高度

我有以下代碼：爲什麼離開DIV不佔地100％的高度

<div style="padding-top: 30px; text-align: center; position: relative;"> 
        <div id="dvQuotes" style="min-height: 100px; border: 1px solid blue;"> 
         <div id="dvOrangeLeftQuote" style="float: left; width: 18%; height: 100%; padding-right: 2%; background: #DDD; text-align: right;"> 
          <img src="theImages/quoteOrangeLeft.png" /> 
         </div> 
         <div id="dvOrangeQuote" style="text-align: left; width: 80%; font-weight: bold; color: #000000; font-size: medium; margin-top: 40px; margin-bottom: 40px; background: #6c6c6c;"> 
          I have been blessed to be assisted by this group. Everyone in all positiong have treated my like family. My doctors are more than excellent, and I can't stop telling everyone about them. 
         </div> 
         <div id="dvOrangeRightQuote" style="padding-left: 2%; float: right; width: 18%; position: absolute; bottom: 0; right: 0; background: #7e75f2; text-align: left;"> 
          <img src="theImages/quoteOrangeRight.png" /> 
         </div> 
        </div> 
       </div>

其中顯示：

enter image description here

這是我所期待的事：

我該如何實現它？

UPDATE：當藍色的邊框被刪除，對齊搞砸：

enter image description here

來源

2014-07-23 Si8

側面說明，儘量避免內嵌樣式。 – j08691

@ j08691這是一個例子，一切都在樣式表:) – Si8

你有沒有試過對所有div使用相同的固定高度？ – EduardoFernandes

向#dvOrangeQuote申請width:60%;和。參見：http://jsfiddle.net/Whre/zfSc2/

來源

2014-07-23 14:19:26 SVSchmidt

對不起，這裏是問題：http://jsfiddle.net/asE2P/如果我保持邊界的圖像正確顯示，只要我刪除它，他們沒有正確對齊。 – Si8

[http://jsfiddle.net/Whre/zfSc2/1/](http://jsfiddle.net/Whre/zfSc2/1/） – SVSchmidt

您需要設置一個height父元素。

現在您只設置了min-height屬性。這與height屬性的處理方式不同，因此子元素將不知道100％的高度應該是什麼意思。

查看示例here。

來源

2014-07-23 14:18:06 Padarom

對不起，這是問題：http://jsfiddle.net/asE2P/如果我保持邊界的圖像顯示正確，只要我刪除它們，他們沒有正確對齊。 – Si8

包含圖像的div將佔據圖像內部100％的高度。嘗試將「quote-divs」的100％高度更改爲100px。

來源

2014-07-23 14:18:39 Bokdem

當我刪除藍色邊框時，對齊會混亂。更新我的問題。 – Si8

你只能刪除邊框？ – Bokdem

我其實把位置放在錯誤的DIV上。現在修復。謝謝:) – Si8

沒關係？

http://jsfiddle.net/55ZGm/

<div style="padding-top: 30px; text-align: center; position: relative;"> 
    <div id="dvQuotes" style="min-height: 100px; border: 1px solid blue;"> 
     <div id="dvOrangeLeftQuote" style="float: left; width: 18%; height: 100%; padding-right: 2%; background: #DDD; text-align: right;"> 
      <img src="theImages/quoteOrangeLeft.png" /> 
     </div> 
     <div id="dvOrangeQuote" style="text-align: left; font-weight: bold; color: #000000; font-size: medium; margin-top: 40px; margin-bottom: 40px;margin: 40px 22%; background: #6c6c6c;"> 
      I have been blessed to be assisted by this group. Everyone in all positiong have treated my like family. My doctors are more than excellent, and I can't stop telling everyone about them. 
     </div> 
     <div id="dvOrangeRightQuote" style="padding-left: 2%; float: right; width: 18%; position: absolute; bottom: 0; right: 0; background: #d00; text-align: left;"> 
      <img src="theImages/quoteOrangeRight.png" /> 
     </div> 
    </div> 
</div>

來源

2014-07-23 14:20:30

當我刪除藍色邊框時，對齊會混亂。更新我的問題。 – Si8

您可以爲#dvQuotes添加overflow：hidden –

爲什麼離開DIV不佔地100％的高度

回答

相關問題