'流氓'div正在抵消它的兄弟姐妹 [英] 'rogue' div is offsetting its siblings

问题描述

基本上我有一套结构非常相似的div，然后跟着它们，我有一个div，这个div是这个集合中唯一的。基本上第一个div是一堆不同的类别，最后一个div是userprofile type square。我无法弄清楚为什么用户配置文件正在渲染的位置高于其他div。

它们都具有相同的css

  cursor：pointer; 
 display：inline-block; 
 margin：10px; 
 padding：5px 5px 10px 5px; 
 width：219px; 
 height：219px; 
背景：#fff; 
  

和容器有这个css

  display：block; 
 float：left; 
宽度：100％; 
 text-align：center; 
 padding：15px; 
 white-space：nowrap; 
 overflow-x：auto; 
 overflow-y：hidden; 
 box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 -o-box-sizing：border-box; 
 -ms-box-sizing：border-box; 
  

这就像是

我猜这是因为divs内部结构不同，米不知道为什么它这样做。我还注意到，如果例如其中一个类别div的图像不加载，它的行为方式与我的流氓div类似。

这个问题非常感谢。

解决方案使用 display：inline-block; 最好总是向孩子添加 vertical-align：top; （然后根据需要从那里格式化），特别是如果您的容器中有不同的元素类型或图像。即使你的子元素中的图像可能会混乱 inline-block; 的布局。 inline-block 元素也受到空白问题的影响，这可能会影响布局。为了防止您可以将所有子元素放在一起或注释掉空白。

演示： http://jsfiddle.net/ThinkingStiff/wwwkJ/

HTML：

 < div id =container> 
< div class =child> one< / div> 
< div class =child> two< / div> 
< img class =child/> 
< / div> 
 
< div id =container-align> 
< div class =child-align> one< / div> 
< div class =child-align> two< / div> 
< img class =child-align/> 
< / div> 
 
< div id =container-align-whitespace> 
< div class =child-align> one< / div><！ -  
  - >< div class =child-align> two< / div> ;<！ -  
  - >< img class =child-align/> 
< / div> 
  

CSS：

  .child {
 border：1px solid red; 
 display：inline-block; 
 height：50px; 
 width：50px; 
} 
 
 .child-align {
 border：1px solid red; 
 display：inline-block; 
 height：50px; 
 vertical-align：top; 
 width：50px; 
} 
 
 #container，＃container-align，＃container-align-whitespace {
 border：1px solid black; 
 height：100px; 
 width：300px; 
} 
  

输出：

Basically I have a set of divs that are pretty much identical in structure, then following them I have a div that is unique to the set. Basically the first divs are a bunch of different categories and the last div is a userprofile type square. What I can't figure out is why the user profile square is being rendered with a higher position than the other divs.

they all have the same css

  cursor: pointer;
  display: inline-block;
  margin: 10px;
  padding: 5px 5px 10px 5px;
  width: 219px;
  height: 219px;
  background: #fff;

and the container has this css

display: block;
float: left;
width: 100%;
text-align: center;
padding: 15px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

this is what it looks like

I'm guessing it's because the divs internal structure is different, but I'm not sure why it's doing this. I also noticed that if for example one of the category divs' images do not load it behaves the same way as my rogue div.

Any light there is to be shed on this issue is much appreciated.

解决方案

With display: inline-block; it's best to always add vertical-align: top; to the children (and then format from there as needed), especially if you have different element types or images in your container. Even images inside of your child elements can mess up the layout of inline-block;. inline-block elements also suffer from the "whitespace problem", which can affect layout. To prevent that you can either put all child elements together or comment out the whitespace.

Demo: http://jsfiddle.net/ThinkingStiff/wwwkJ/

HTML:

<div id="container">
    <div class="child">one</div>
    <div class="child">two</div>
    <img class="child" />
</div>

<div id="container-align">
    <div class="child-align">one</div>
    <div class="child-align">two</div>
    <img class="child-align" />
</div>

<div id="container-align-whitespace">
       <div class="child-align">one</div><!--
    --><div class="child-align">two</div><!--
    --><img class="child-align" />
</div>

CSS:

.child {
    border: 1px solid red;
    display: inline-block;
    height: 50px;
    width: 50px;
}

.child-align {
    border: 1px solid red;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

#container, #container-align, #container-align-whitespace {
    border: 1px solid black;
    height: 100px;
    width: 300px;
}

Output:

这篇关于'流氓'div正在抵消它的兄弟姐妹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！