Question

我有以下代码：

<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

这就是我要做的事情：

enter image description here

我怎样才能实现它？

更新：当删除蓝色边框时，对齐混乱：

enter image description here

Answer 1

您需要为父元素设置height。

现在您只设置min-height属性。这与height属性的处理方式不同，因此子元素将不知道100％的高度应该是什么意思。

查看示例here。

Answer 2

包含图像的div将占据图像内部100％的高度。尝试从＆quot; quot-divs＆＃39;更改100％的高度也是100px。

Answer 3

没关系？

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>

Answer 4

将width:60%;和margin:40px auto 0 auto;应用于#dvOrangeQuote。请参阅：http://jsfiddle.net/Whre/zfSc2/

为什么左侧DIV不能覆盖100％的高度

4 个答案: