如何把两个div彼此相邻？

我需要建立一个左侧有文字和右侧有照片的列表。如何把两个div彼此相邻？

这是我的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权 - >仍低于一个其他的...需要帮助，请。

来源

2013-10-09 michi

您还需要漂浮div.one。

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

Updated Fiddle.

如果您想了解浮动或元素的定位，你可以阅读更多有关MDN's documentation简单的解释是这样的：

当元素是浮动的，它将从文档的正常流程中取出。它会向左或向右移动，直到它接触到包含框或其他浮动元素的边缘。

来源

2013-10-09 22:23:27 kunalbhat

哦，那很容易;-)现在，我可以把它说'div.one'会给空间''div.two'and裹div.one'would中的文本？ – michi

当然，没有太复杂，简单的答案就是将'％'宽度添加到'div.one'，比如'width：65％'。 – kunalbhat

这是一个更新的小提琴：http：// jsfiddle。net/egXuq/8/ – kunalbhat

div.wrap没有宽度。这是否会进入一个有响应式设计的页面，或者是您将设置明确宽度的页面？

我采用了固定宽度的解决方案，因为响应式设计最好使用像Bootstrap这样的库。我给了div.wrap一个宽度，然后div.one一个宽度，并将div.one和div.two都左移，并将其添加到div.wrap。

fixed width Fiddle

来源

2013-10-09 22:33:18

好的，我明白了。我不想使用固定的'宽度'，但没有引导。 – michi

好的。 http://jsfiddle.net/Y6AtW/2/删除了很多固定的宽度。 –

哦，'width：auto'非常有趣，谢谢！ – michi

是否与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-09 22:40:17 flup

好的，也很有趣。我不得不使用'span'而不是'div'。 – michi

更新了一点。交换divs也有诀窍。 – flup

如何把两个div彼此相邻？

回答

相关问题