Question

在下面的示例中，文本开箱即用。当我减小borowser的大小时，盒子的大小会重新打开，但文本变得混杂和无组织。怎么解决这个问题？

<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>

Answer 1

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

Answer 2

在所有情况下，您的文字都会溢出框，因此您应该将overflow:scroll添加到notice类

Answer 3

取决于你想要做什么。

如果方框必须是固定高度，则有几种不同的策略最简单的方法是关闭notice类的高度限制。但是，这将重排您的文档并将所有内容都推下来。

另一方面，如果你想保持当前的布局，我不能单独作出决定，因为填充，高度和溢出会在这个元素上相互冲突。

文本超出了Css中的框的限制

3 个答案: