为什么离开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％的高度

回答

相关问题