我无法让这两个内容并排显示。我以前从未遇到过以这种方式显示内容的任何问题,因此非常感谢任何可用的帮助
HTML
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li><a href="#" title="">One</a></li>
</ol>
</div>
<div class="clear-div"></div>
<div class="block-two">
<div class="block-two-title">Block 2</div>
<div class="thumb-title">
<a href="#"><img src="images/example.jpg" width=155 height=130 /></a>
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<a href="#"><img src="images/example.jpg"width=155 height=130 /></a>
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<a href="#"><img src="images/example.jpg"width=155 height=130 /></a>
<h4>Title</h4>
<p>Description</p>
</div>
CSS
.popular-games { float:left }
.latest-screenshots img{ display:inline-block}
.thumb-title{display: inline-block}`
最佳答案
这是您的 fiddle .你不能让这两个 block 彼此相邻显示,因为它们之间有一个清除 div。如果你删除它并 float 两个 block ,你会得到想要的结果,比如 here
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li><a href="#" title="">One</a></li>
</ol>
</div>
<!-- remove this one <div class="clear-div"></div> -->
<div class="block-two">
[…]
关于html - 多个内容 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17506810/