文字旁邊的HTML浮動圖片

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> ，如果您使用<span>或<p> ，則這兩個標記的語義和在DOM中的表現方式都更好。用css浮動，應該可以工作！

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>