Html 如何将两个div并排放置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19283852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put two divs next to each other?
提问by michi
I need to build a list that has text on the left side and a photo on the right side.
我需要建立一个左侧有文字和右侧有照片的列表。
This is my HTML:
这是我的 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>
This is the CSS:
这是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;
}
The problem:http://jsfiddle.net/egXuq/
问题：http : //jsfiddle.net/egXuq/
What I tried:I studied some solutions on SO, and...
我的尝试：我研究了一些关于 SO 的解决方案，然后......
- put
overflow: autoin the parent div - floated
div.tworight --> still one below the other... need help, please.
- 放入
overflow: auto父div div.two向右浮动--> 仍然一个在另一个下面...需要帮助，请。
采纳答案by kunalbhat
You will also need to float div.one.
您还需要浮动div.one。
div.one {
border: 1px solid #AAAAAA;
float: left;
}
--
——
If you're curious about floats or element positioning, you can read more on the MDN's documentationThe simple explanation is this:
如果您对浮动或元素定位感到好奇，可以在MDN 的文档中阅读更多内容简单的解释是这样的：
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.
当一个元素被浮动时，它被从文档的正常流中取出。它向左或向右移动，直到它接触到它的包含框或另一个浮动元素的边缘。
回答by Jason Aller
The div.wrapdoesn't have a width. Is this going into a page that will have responsive design, or one where you will be setting explicit widths?
在div.wrap没有宽度。这是进入一个具有响应式设计的页面，还是你将设置显式宽度的页面？
I went with a fixed width solution for you, as responsive design would be best done with a library like Bootstrap. I gave div.wrapa width, then div.onea width and floated both div.oneand div.twoto the left and added clear to div.wrap.
我为您提供了一个固定宽度的解决方案，因为响应式设计最好使用像Bootstrap这样的库来完成。我给了div.wrap一个宽度，然后给了一个宽度，然后向左div.one浮动div.one和div.two向左浮动，并在div.wrap.
回答by flup
Does the structure with the divs have to be this way? If you swap the inner divs, the photo will happily float to the right.
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>
