文章在我的页面中不显示为内联对象



帮助我找出为什么我的文章没有显示在一行中,即使它被告知显示为内联块元素(每篇文章都有一个图像、h3文本和一段(。这是我的CSS代码:

#article_1{
width: 1000px;
margin: auto;
}

article{
max-width: 33%;
display: inline-block;
}
article img{
max-width: 100%;
}

这是我的HTML代码:

<body>
<header><h1>News page</h1></header>
<section id="article_1">
<article>
<h3>Kamal has chosen the sexiest man alive!!!</h3>
<div id="article_img" style="background:url(./photos/sex - Copy.jpg)"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. texttook a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</section>
<br>
<section id="article_1">
<article>
<h3>Kamal has chosen the sexiest man alive!!!</h3>
<div id="article_img" style="background:url(./photos/sex - Copy.jpg)"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. texttook a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</section>
<br>
<section id="article_1">
<article>
<h3>Kamal has chosen the sexiest man alive!!!</h3>
<div id="article_img" style="background:url(./photos/sex - Copy.jpg)"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. texttook a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</section>
<br>

根据提供的信息,文本听起来像是在换行?

试试这个

article{
max-width: 33%;
display: inline-block;
white-space: nowrap;
}

让我知道这是怎么回事!

最新更新