Question

此刻我正在学习浮子，我有一个问题。

看看代码here，我想知道是否可以做到这一点，以便background-color属性仅适用于段落，而不适用于图像。

我尝试将clear: both放在p的声明中，但是，这使该段落位于图片的下面，这不是我想要的。

body{
    background-color: #cccccc;
}

.wrapper{
    max-width: 960px;

    margin: 0 auto;
    padding: 20px;
    
    background-color: #ffffff;
}

img{
    width: 300px;
    float: left;
    margin: 20px;
}

p{
    background-color: rgb(0,200,255);
    padding: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <div class="wrapper">
        <img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwallpapercave.com%2Fwp%2FTvGvWdR.jpg&f=1" />
        <p>Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Cras adipiscing enim eu turpis egestas pretium
        aenean. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Ante metus dictum at tempor commodo
        ullamcorper a lacus. Risus nec feugiat in fermentum posuere urna. In nisl nisi scelerisque eu ultrices vitae. Fringilla
        urna porttitor rhoncus dolor purus. Id leo in vitae turpis massa sed. Viverra aliquet eget sit amet tellus cras
        adipiscing. Elementum eu facilisis sed odio morbi quis commodo. Pellentesque elit eget gravida cum sociis natoque
        penatibus et magnis. Urna condimentum mattis pellentesque id nibh. Tincidunt id aliquet risus feugiat in. Tortor
        posuere ac ut consequat semper viverra nam libero. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras
        fermentum. Pharetra magna ac placerat vestibulum lectus.</p>
    </div>
</body>

</html>

感谢所有建议！预先感谢！

Answer 1

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <div class="wrapper">
        <img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwallpapercave.com%2Fwp%2FTvGvWdR.jpg&f=1" />
        <p>Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Cras adipiscing enim eu turpis egestas pretium
        aenean. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Ante metus dictum at tempor commodo
        ullamcorper a lacus. Risus nec feugiat in fermentum posuere urna. In nisl nisi scelerisque eu ultrices vitae. Fringilla
        urna porttitor rhoncus dolor purus. Id leo in vitae turpis massa sed. Viverra aliquet eget sit amet tellus cras
        adipiscing. Elementum eu facilisis sed odio morbi quis commodo. Pellentesque elit eget gravida cum sociis natoque
        penatibus et magnis. Urna condimentum mattis pellentesque id nibh. Tincidunt id aliquet risus feugiat in. Tortor
        posuere ac ut consequat semper viverra nam libero. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras
        fermentum. Pharetra magna ac placerat vestibulum lectus.</p>
    </div>
</body>

</html>

CSS：

body{
    background-color: #cccccc;
}

.wrapper{
    max-width: 960px;

    margin: 0 auto;
    padding: 20px;

    background-color: #ffffff;
}

img{
    width: 300px;
    float: left;
    margin: 20px;
}

p{
    background-color: rgb(0,200,255);
    padding: 20px;
    clear: both;
}

Answer 2

尝试在div标签周围添加另一个包装p：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <div class="wrapper">
        <img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwallpapercave.com%2Fwp%2FTvGvWdR.jpg&f=1" />
        <div class="clear">
            <p>Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Cras adipiscing enim eu turpis egestas pretium
    aenean. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Ante metus dictum at tempor commodo
    ullamcorper a lacus. Risus nec feugiat in fermentum posuere urna. In nisl nisi scelerisque eu ultrices vitae. Fringilla
    urna porttitor rhoncus dolor purus. Id leo in vitae turpis massa sed. Viverra aliquet eget sit amet tellus cras
    adipiscing. Elementum eu facilisis sed odio morbi quis commodo. Pellentesque elit eget gravida cum sociis natoque
    penatibus et magnis. Urna condimentum mattis pellentesque id nibh. Tincidunt id aliquet risus feugiat in. Tortor
    posuere ac ut consequat semper viverra nam libero. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras
    fermentum. Pharetra magna ac placerat vestibulum lectus.</p>
        </div>
    </div>
</body>
</html>

.clear {
    clear: both;
}

Answer 3

重置图像的背景色

background-color: #ffffff

如果您希望页边距也为白色，则可以使用边框代替页边距。

border: 20px solid #ffffff

Answer 4

您可以将文本放在span元素内，然后将span放在p元素内。然后将背景色添加到span元素中，而不是p元素中。

这是更改后的代码Codepen

清除浮动在同一行

4 个答案: