多个内容块

时间:2013-07-06 20:25:58

标签: html css

我无法将这两个内容显示在彼此旁边。我之前没有遇到任何以这种方式显示内容的问题,所以会感谢任何可用的帮助

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}`

2 个答案:

答案 0 :(得分:0)

这是你的fiddle。你不能让这两个块彼此相邻显示,因为它们之间有一个清除div。如果将其移除并浮动两个块,您将获得所需的结果,如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">
[…]

答案 1 :(得分:0)

只需添加以下CSS规则:

html, body { height: 100%; }

body > div {
    float: left;
}

这是Jsfiddle:DEMO