2

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

这是我的 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-> 仍然在另一个下方...需要帮助，请。
4

3 回答 3

2

您还需要浮动div.one。

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

更新了小提琴。

--

如果您对浮动或元素定位感到好奇，可以阅读MDN 的文档了解更多内容。简单的解释是这样的：

当一个元素浮动时，它会脱离文档的正常流程。它向左或向右移动，直到它接触到它的包含框或另一个浮动元素的边缘。

于 2013-10-09T22:23:27.337 回答
1

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

我为您选择了一个固定宽度的解决方案，因为响应式设计最好使用像Bootstrap这样的库来完成。我给了div.wrap一个宽度，然后是一个宽度，然后向左div.one浮动div.one并div.two添加到div.wrap.

固定宽度小提琴

于 2013-10-09T22:33:18.843 回答
1

带有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/

于 2013-10-09T22:40:17.563 回答