html - 并排放置 2 个 div

Question

如何在 li 中并排放置 2 个 div？我在这里放了一些东西http://jsfiddle.net/n7xUY/展示我正在尝试做的事情。

我的html如下:

<ul class="mostRead">
<li class="mostRead 1">
    <a href="#">
        <div class="ranking-image-container">
            <span class="ranking">1</span>
                 <img src="http://lorempixel.com/100/60/" />
        </div>
        <div class="copy-container">
            <span class="mostReadTitle">
                <h4 class="title">Title 1</h4>
            </span>
        </div>
</a>
</li>

<li class="mostRead 1">
    <a href="#">
        <div class="ranking-image-container">
            <span class="ranking">2</span>
                <img src="http://lorempixel.com/100/60/" />
        </div>
        <div class="copy-container">
            <span class="mostReadTitle">
                <h4 class="title">Title 2</h4>
            </span>
        </div>
</a>
</li>

</ul>

我的 CSS 如下:

ul.mostRead { list-style: none outside none; padding-left:0;  }
li.mostRead {}
.ranking-image-container { }
span.ranking {}
span.ranking img {}
.copy-container {}
span.mostReadTitle {}

基本上，我需要在同一行获取 div.ranking-image-container 和 div.copy-container 及其内容，但我不知道该怎么做!

Answer 1

设置display:inline-block;或display:inline;它会让所有内容都在同一行

.ranking-image-container,.copy-container {
    display:inline-block;    
}

Fiddle Demo