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
向右浮动div.two - ＆GT;还是一个低于另一个......请帮助。

Answer 1

您还需要浮动div.one。

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

Updated Fiddle.

-

如果您对浮动或元素定位感到好奇，可以在MDN's documentation上阅读更多内容。简单的解释如下：

当一个元素浮动时，它会从正常的流动中取出文献。它向左或向右移动，直到它接触到边缘它包含盒子或其他浮动元素。

Answer 2

div.wrap没有宽度。这是进入一个具有响应式设计的页面，还是一个你将设置显式宽度的页面？

我为您提供了固定宽度的解决方案，因为响应式设计最好使用像Bootstrap这样的库。我给了div.wrap一个宽度，然后div.one一个宽度，并将div.one和div.two向左浮动，并向div.wrap添加了清晰。

fixed width Fiddle

Answer 3

div的结构是否必须这样？如果您交换内部div，照片将很乐意向右浮动。

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

http://jsfiddle.net/sXMy4/

如何将两个div放在一起？

3 个答案: