为什么这个inline-block元素被向下推？ [英] Why is this inline-block element pushed downward?

问题描述

以下是我的代码，我想了解为什么 #firstDiv正被所有浏览器向下推。我真的想要了解内部的工作原理，为什么它被推下，而不是通过一种方式向上拉。 （我知道如何对齐他们的上衣：））

我知道它的overflow：hidden这是导致它，但不确定为什么它的向下div。

 < div id =container> 
< div id =firstDiv> FIRST< / div> 
< div id =secondDiv> SECOND< / div> 
< div id =thirdDiv> THIRD 
< br>一些更多内容< br>一些更多内容
< / div> 
< / div> 
 
 body {
 width：350px; 
 margin：0px auto; 
} 
 #container {
 border：15px solid orange; 
} 
 #firstDiv {
 border：10px solid brown; 
 display：inline-block; 
 width：70px; 
 overflow：hidden; 
} 
 #secondDiv {
 border：10px solid skyblue; 
 float：left; 
 width：70px; 
} 
 #thirdDiv {
 display：inline-block; 
 border：5px solid yellowgreen; 
} 
  

http://jsfiddle.net/WGCyu/ 。

解决方案

基本上，您在代码中添加了更多杂乱这造成了更多的混乱，所以首先我试图清除杂乱，阻碍了解真正的问题。

首先我们必须确定什么是真正的问题？
这是为什么 inline-block 向下推的原因。

1 -
为什么不给所有三个div相同的边框宽度？
让我们给它。

2 - 浮动元素与向下推的inline-block元素有任何连接吗？
不，它与它无关。

因此，我们已将该div删除。

下面是一些标题来抓住行框的想法，以及它们如何排列在同一行esp中仔细阅读上一段，因为你的问题的答案。

inline-block的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其overflow属性具有除visible之外的计算值，在这种情况下，基线是底部边缘。

如果您不确定基准，那么这里只是简单的解释。

除了'gjpqy'之外的所有字符都写在基线上，您可以将其视为基线，如同您在这些随机字符下绘制一条与下划线相同的简单水平线，是基线，但现在如果你在同一行上写任何'gjpqy'字符，那么这些字符的下部将落在该行下面。

所以，我们可以说除了'gjpqy'之外的所有字符都完全写在基线之上，而这些字符的某些部分写在基线之下。

3 - 为什么不检查我们行的基线在哪里？
我添加了几个字符，显示我们行的基线。

4 - 为什么不在div中添加一些字符以在div中找到它们的基线？
此处，在div中添加了一些字符以阐明基线。

现在，当您了解基线时，请阅读有关内联块基线的以下简化版本。

i）如果inline-block问题的overflow属性设置为visible（这是默认情况下，所以不需要设置）。
那么其基线将是该行的包含块的基线。

如果有问题的inline-block的overflow属性设置为OTHER THAN visible。

• 第一点详情

现在看看这个再次澄清你的概念，绿色div正在发生什么。
如果仍有任何混淆，那么这里添加更多的字符靠近绿色div以建立包含块的基线和绿色基线是对齐的。

好，我现在声称他们有相同的基线？ RIGHT？

5 - 为什么不重叠他们，看看他们是否适合另一个？
所以，我带来第三个div：左边：35px; 现在检查他们是否有相同的基线？

现在，我们

• 第二点详细

好吧，在解释第一点第二点是很容易消化，你看到第一个div，其溢出属性设置为其他可见（隐藏）的底线的底线。

现在，您可以做几个实验来进一步说明。 a href =http://jsfiddle.net/WGCyu/47/>第一个div溢出：visible（或完全删除）。


1. 设置第二个div溢出：除了可见的。


2. 设置两个div溢出：除了可见的。

现在带回你的杂乱

1. 带上返回您浮动的div （当然需要
   
   增加身体的一些宽度）
   您看到它没有效果。


2. 带回相同的奇数页边距。


3. 设置绿色div溢出：在您的问题中设置的可见（这种不对齐是由于边框宽度从1px增加到5px，所以如果合适排除左，您会看到没有问题）


4. 现在删除我添加以帮助
   理解的其他字符。 （当然删除否定左侧）


5. 最后，减小body width ，因为我们不再
   现在我们回到我们开始的地方了。
   
   
   

   希望我已经回答了您的问题。

   
   

   Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or another. (and I know how to align their tops :))

   And I know that its overflow:hidden which is causing it but not sure that why its pushing that div downward.

   <div id="container">
   <div id="firstDiv">FIRST</div>
   <div id="secondDiv">SECOND</div>
   <div id="thirdDiv">THIRD
   <br>some more content<br> some more content
   </div>
   </div>
   
   body{
       width: 350px;
       margin: 0px auto;
   }
   #container {
       border: 15px solid orange;   
   }
   #firstDiv{
       border: 10px solid brown;     
       display:inline-block;
       width: 70px;      
       overflow:hidden;  
   }
   #secondDiv{
       border: 10px solid skyblue;         
       float:left;
       width: 70px;     
   }
   #thirdDiv{
       display:inline-block;
       border: 5px solid yellowgreen;    
   }
   

   http://jsfiddle.net/WGCyu/.

   解决方案

   Basically you have added more clutter in your code which is creating more confusion so first I try to remove clutter which hinders understanding the real issue.

   First of all we have to establish that what's the real question? Its that why "inline-block" element is pushed downward.

   Now we start to understand it and remove the clutter first.

   1 - Why not give all three divs same border width? Let's give it.

   2 - Does floating element has any connection with inline-block element being pushed downward? No, it has nothing to do with it.

   So, we have removed that div altogether. And you are witnessing same behavior of inline-block element being pushed downward.

   Here comes the turn of some literature to grasp the idea of line boxes and how they are lined in the same line esp read last paragraph carefully because there lies the answer of your question.

   The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

   If you are not sure about baseline then here is brief explanation in simple words.

   All characters except 'gjpqy' are written on the baseline you can think of baseline as if you draw a simple horizontal line same as underlining right below these "random characters" then it will be the baseline but now if you write any of 'gjpqy' character(s) on the same line then lower part of these characters would fall below the line.

   So, we can say that all characters except 'gjpqy' are written completely above the baseline while some part of these characters are written below the baseline.

   3 - Why not check where is the baseline of our line? I have added few characters which show the baseline of our line.

   4 - Why not add some characters in our divs too to find their baselines in the div? Here, some characters added in divs to clarify baseline.

   Now when you understand about baseline, read the following simplified version about baseline of inline-blocks.

   i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though). Then its baseline would be the baseline of the containing block of the line.

   ii) If inline-block in question has its overflow property set to OTHER THAN visible. Then its bottom margin would be on the baseline of the line of containing box.

   • First point in detail

   Now look at this again to clarify your concept that what's happening with green div. If yet any confusion then here is added more characters close to green div to establish the baseline of the containing block and green div baseline is aligned.

   Well, I am now claiming that they have same baseline? RIGHT?

   5 - Then why not overlap them and see if they are fit right one on another? So, I bring third div -left: 35px; to check if they have same baseline now?

   Now, we have got our first point proved.

   • Second point in detail

   Well, after explanation of first point second point is easily digestible and you see that first div which has overflow property set to other than visible (hidden) has its bottom margin on the base line of the line.

   Now, you can do couple of experiments to further illustrate it.

   1. Set first div overflow:visible (or remove it altogether).
   2. Set second div overflow: other than visible.
   3. Set both divs overflow: other than visible.

   Now bring back your clutter and see if everything is looking to fine to you.

   1. Bring back your floated div (of course there is need to
      increase some width of body) You see it has no effect.
   2. Bring back same odd margins.
   3. Set green div to overflow: visible as you set in your question (that misalignment is due to increase of border width from 1px to 5px so if adjust negative left you'll see there is no issue)
   4. Now remove additional characters I added to aid in understanding. (and of course remove negative left)
   5. Finally reduce body width because we no longer need wider one.

   And now we are back to where we started from.

   Hopefully I have answered your question.

   这篇关于为什么这个inline-block元素被向下推？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！