H3标签和漂浮的DIV塌陷

Question

如果我将边框底部或背景颜色设置为H3标题，我的H3标题和浮动div(图像(会塌陷；我无法将它们分开；

我尝试了第二个版本-如果我在H3标题上设置Display:Flex，那么就会出现一个新问题-标题向左移动太远；

显示：块版本：

.layout {
max-width:600px;
margin: auto;
border: 1px dashed blue;
width:auto;
}
p, h3  {
max-width:400px;
margin: auto;
border: 1px solid violet;
width: auto;
}
p {border: none;}
p + p, h3 + p {
margin-top: 10px;
}
.box {
width:150px;
height: 150px;
float: right;
border: 2px solid green;
}
h3 {
color: red;
border-bottom: 3px solid blue;
background: yellow;
display:block;
}
.image {
background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

<div class="layout">

<div class="box">
<div class="image"></div>
</div>
<h3>Article Title Header</h3>
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>


</div>

显示：下面的FLEX版本：

.layout {
max-width:600px;
margin: auto;
border: 1px dashed blue;
width:auto;
}
p, h3  {
max-width:400px;
margin: auto;
border: 1px solid violet;
width: auto;
}
p {border: none;}
p + p, h3 + p {
margin-top: 10px;
}
.box {
width:150px;
height: 150px;
float: right;
border: 2px solid green;
}
h3 {
color: red;
border-bottom: 3px solid blue;
background: yellow;
display:flex;
}
.image {
background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

<div class="layout">

<div class="box">
<div class="image"></div>
</div>
<h3>Article Title Header</h3>
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>


</div>

Answer 1

为什么不使用CSS flex属性

为什么你不尝试CSS flex属性来实现你的目标？对于这种复杂性，Flex既安全又有趣。在这里，我实现了您的问题解决方案的flex版本。

.layout {
max-width:600px;
margin: auto;
border: 1px dashed blue;
width:auto;
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
p, h3  {
max-width:400px;
margin: auto;
border: 1px solid violet;
width: auto;
}
p {border: none;}
p + p, h3 + p {
margin-top: 10px;
}
.box {
width:150px;
height: 150px;
border: 2px solid green;
}
h3 {
color: red;
border-bottom: 3px solid blue;
background: yellow;
display:flex;
}
.image {
background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

<div class="layout">
<div class="box">
<div class="image"></div>
</div>
<div>
<h3>Article Title Header</h3>
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), 
</p>
<p>
With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.
</p>
</div>
</div>

Answer 2

这就是您想要的吗？

.layout {
max-width:600px;
margin: auto;
border: 1px dashed blue;
width:auto;
}

p + p, 
h3 + p {
margin-top: 10px;
}
.box {
width:150px;
height: 150px;
float: right;
border: 2px solid green;
margin-left: 20px
}
h3 {
color: red;
border-bottom: 3px solid blue;
background: yellow;
display:block;
}
.image {
background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

<div class="layout">
<h3>Article Title Header</h3>

<div class="box">
<div class="image"></div>
</div>
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>
</div>

更新：CSS网格解决方案，这里我用DIV包装了p。

.layout {
max-width:600px;
margin: auto;
border: 1px dashed blue;
display: grid;
grid-template-columns: 1fr 150px; 
grid-template-rows: auto; 
grid-template-areas: "title title" "para box";
gap: 20px;
}

h3 {
color: red;
border-bottom: 3px solid blue;
background: yellow;
grid-area: title; 
margin: 0
}
.para {
grid-area: para; 
}
p {
margin: 0;
}
p + p {
margin-top: 15px;
}
.box {
grid-area: box;
height: 150px;
border: 2px solid green;
}

.image {
background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

<div class="layout">
<div class="box">
<div class="image"></div>
</div>
<h3>Article Title Header</h3>
<div class="para">
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>
</div>
</div>

Answer 3

它们彼此重叠，因为.box有float: left，但h3或p没有任何float属性

有几种方法可以修复它！

你可以表现得像一个响应式的设计，为他们制作2列(我建议这个解决方案(，你可以在这里阅读更多。

或者，您可以将标题和段落添加到另一个div中，作为左侧的容器，并为其声明float: left(根据您的工作，您可以为.box同时使用left或right(：

.layout {
max-width:600px;
margin: auto;
border: 1px dashed blue;
width:auto;
}
p, h3  {
max-width:400px;
margin: auto;
border: 1px solid violet;
width: auto;
}
p {border: none;}
p + p, h3 + p {
margin-top: 10px;
}
.box {
width:150px;
height: 150px;
float: right;
border: 2px solid green;
}
h3 {
color: red;
border-bottom: 3px solid blue;
background: yellow;
display:block;
}
.image {
background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}
.left-side {
float: left; /* or float: right; */
}

<div class="layout">
<h3>Article Title Header</h3>
<div class="box">
<div class="image"></div>
</div>
<div class="left-side">       
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>
</div>
</div>