css - 如何将两个div并排放置？

Question

我需要构建一个列表，左侧有文本，右侧有照片。

这是我的 HTML:

<div class="wrap">
    <div class="one">
        <p>This is text to be displayed in this div. It can be long, or short, or anything.</p>
    </div>
    <div class="two">photo here</div>
</div>
<div class="wrap">
    <div class="one">
        <p>#2: This is text to be displayed in this div...</p>
    </div>
    <div class="two">photo here</div>   
</div>    

这是 CSS:

div.wrap {
    border: 1px solid #000000;
    overflow: auto;
}
div.one {
    border: 1px solid #AAAAAA;
}
div.two {
    background-color: #DDDDDD;
    width: 200px;
    height: 300px;
    float: right;
}

问题: http://jsfiddle.net/egXuq/

我尝试过的: 我研究了一些关于SO的解决方案，并且......

• 将 overflow: auto 放入父 div
• float div.two 右侧 --> 还是一个在另一个下面...需要帮助，请。

Answer 1

您还需要 float div.one。

div.one {
    border: 1px solid #AAAAAA;
    float: left;
}

Updated Fiddle.

--

如果您对 float 或元素定位感到好奇，您可以在 MDN's documentation 上阅读更多内容。简单的解释是这样的:

When an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.