html - 容器DIV高度不适应内容

Question

你知道为什么我的 .block-left DIV 中的文本会超出容器 .block 的范围吗？我希望 .block(没有固定高度)根据 .block-left 和 .block-right 中的内容调整其高度。 http://jsfiddle.net/9dUC9/ 谢谢

.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-left {
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    width: 50%;
}
.block-right {
    float: right;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
}
<div class="block">
    <div class="block-left">CENTRE DE kkjljljlj
        <p>3, rue der</p>
        <p>51 lmlm (klklkl)</p>
        <ul id="contact">
            <li>+3 691 123.456</li>
            <li><a href="javascript:sendAnnotatedMailTo('contact','lmlml','lu','Contact via mlmlm.lu','')">contact@blolklkl.la>

            </li>
            <li><a href="http://goo.gl/maps/Ew2" target="_blank"> Plan d'accès</a>

            </li>
        </ul>
    </div>
    <!-- End DIV block-left -->
    <div class="block-right">hgh</div>
    <!-- End DIV block-right -->
</div>

Answer 1

尝试将 overflow: auto; 添加到 .block。 FIDDLE

.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: auto; /* here */
}