[英]div alignments will not position side by side
I have two div's that I am trying to position side by side but am having trouble. 我有两个div,我想并排放置,但遇到麻烦。 I understand that div's are block elements but I have never had trouble positioning them side-by-side before..
我知道div是块元素,但是之前并没有遇到麻烦。
HTML: HTML:
<div class="contact">
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div>
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div>
</div>
I do not want to post all of the CSS because it is rather long for a SO post, but here it is loaded in a jsfiddle: http://jsfiddle.net/rynslmns/5pQJ7/ 我不想发布所有CSS,因为对于SO帖子来说它很长,但是这里将它加载到jsfiddle中: http : //jsfiddle.net/rynslmns/5pQJ7/
You can either use floating or inline-block elements: 您可以使用浮动元素或内联块元素:
.team {
float: left;
width: 33%;
}
OR 要么
.team {
display: inline-block;
width: 33%;
}
I would choose "display: inline-block" as you don't have to clear the floating afterwards. 我将选择“ display:inline-block”,因为您之后不必清除浮动内容。
You simply need to use css float to get them to be side by side. 您只需要使用css float即可使其并排。
.contact {
overflow: hidden;
}
.team {
float:left;
}
Here is your example code: 这是您的示例代码:
http://jsfiddle.net/jcfB3/ http://jsfiddle.net/jcfB3/
Note, your IDs were incorrect, you can't have 2 IDs that have the same value, I made them unique. 请注意,您的ID不正确,您不能有2个具有相同值的ID,因此我将其设为唯一。 Also, utilizing floats without any other content in a bounding block element has some issues which I fixed in the example code.
而且,在边界块元素中使用没有任何其他内容的浮点数时,我在示例代码中已解决了一些问题。 See http://www.quirksmode.org/css/clearing.html for more info.
有关更多信息,请参见http://www.quirksmode.org/css/clearing.html 。 It is the reason why I added
overflow: hidden
. 这就是我添加
overflow: hidden
的原因overflow: hidden
。
IDs "staff-1", "brian" and "DIV_2" are repeated. 重复标识“ staff-1”,“ brian”和“ DIV_2”。 DOM id is unique.
DOM ID是唯一的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.