html - Css中的框外文字 | Css中的框外文字

在下面的示例中，文本是开箱即用的。当我减小浏览器的大小时，框的大小会突然撕裂，但文本会变得杂乱无章。怎么解决呢？

<html>

<head>
    <meta charset="utf-8">
    <title>This is an email template</title>
    <style>
        body {
            background-color: rgba(79, 183, 227, 0.4);
            direction: rtl;
        }

        body * {
            font-family: Tahoma;
        }

        a:link {
            text-decoration: none;
            margin-right: 25px;
            color: #46B1F9;
        }

        #wrap {
            background-color: #e0f2f6;
            margin: auto;
            width: 75%;
            padding: 15px;
            border: 1px solid grey;
        }

        .item {
            border: 1px solid #95A5A6;
            border-radius: 5px;
            margin-bottom: 25px;
            width: 60%;
            display: inline-block;
        }

        .item p {
            font-size: 1em;
        }

        .item img {
            float: left;
            width: 30%;
        }

        .item .notice {
            text-align: center;
            float: right;
            padding-top: 25px;
            padding-right: 25px;
            width: 50%;
            height: 1em;
        }
        /*clearfixes*/

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            display: inline-block;
        }
        /* Hides from IE-mac \*/

        * html .clearfix {
            height: 1%;
        }

        .clearfix {
            display: block;
        }
        /* End hide from IE-mac */
    </style>

</head>

<body>
    <div id="wrap">
        <div style="padding:15px;">

            <div class="item clearfix">
                <div class="notice">
                    <p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
                </div>
                <img src="http://s14.postimg.org/wqzq39iht/image.jpg" alt="" />
            </div>
            <div class="item clearfix">
                <div class="notice">
                    <p>
                        <strong>اLorem ipsum</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
                </div>
                <img src="http://s10.postimg.org/y4kk17q21/image.jpg" alt="" />
            </div>
            <div class="item clearfix">
                <div class="notice">
                    <p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
                </div>
                <img src="http://s3.postimg.org/xca6ju1kj/image.jpg" alt="" />
            </div>

        </div>
    </div>
    </div>
    </div>
</body>

</html>

最佳答案

如果尝试按内容扩展块，则从.item .notice删除高度应解决此问题。

关于html - Css中的框外文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29056325/