文字

Question

我还在学习css是如何工作的，我还是坚持一个简单的问题。基本上我有这个HTML代码

<div class="polaroid">
    <h1>Lorem Ipsum</h1>
    <pre>   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget imperdiet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</pre>
    <div class="polaroid-content">
        <img src="images/babot1.jpg" alt="bobat1">
    </div>
</div>

我的css看起来像这样

div.polaroid{
position:relative;
margin: 0 auto;
width:99%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding-bottom:20px;
}
div.polaroid h1{
padding:0px 10px 0 10px;
margin-bottom:0px;
}
div.polaroid pre{
padding:0px;
margin:0px;
}
div.polaroid-content{
float:right;
width:40%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 
0.19);
margin-right:10px;
padding-right:0;
}
div.polaroid-content img{
width:50%;
margin-bottom:-3px;
}

但结果并不像我预期的那样。 问题1：当文本较长时，文本超出<div>并扩展水平页面。 问题2：如果您参考图像我的图像在polaroid div之外

会感激任何人的帮助

Answer 1

在这种情况下你不应该使用pre，只需将文本包装在<p>或<span>中，如果你使用这两个标签在语义和它们在DOM中的行为方式都更好使用css float的<span>或<p>应该有效！

Answer 2

.polaroid{
        margin: 0 auto;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding:20px;
        }

    .polaroid p{
    padding:0px;
    margin:0px;
    width: 70%;
    display: inline-block;
        }

    .polaroid-content{
    float:right;
    width:25%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 
    0.19);
    margin-right:10px;
    display: inline-block;
        }


<div class="polaroid">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget imperdiet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <div class="polaroid-content">
        <img src="images/babot1.jpg" alt="bobat1">
    </div>