为什么这个内联块元素向下推?

以下是我的代码，我想了解为什么#firstDiv被所有浏览器向下推。我真的很想了解它的内部工作原理为什么它被向下推，而不是以某种方式向上拉。(而且我知道如何对齐它们的顶部:))

我知道它的溢出是隐藏的;这导致了它，但不确定为什么它把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; } <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>

http://jsfiddle.net/WGCyu/。

当前回答

尝试使所有元素的所有CSS属性相同。

我有类似的问题，在修复这个问题时，我发现我正在删除一个具有字体属性的元素到Div元素。

在删除带有字体属性的元素后，所有DIV的对齐都被打乱了。为了解决这个问题，我将字体属性设置为所有DIV元素，与放入其中的元素相同。

在下面的例子中，类的Dropped元素”。dldCuboidButton"用font-size:30 px定义。

因此，我将相同的属性添加到其余的类，即. cuboidrecycle， . licollect， . dldcollect，这些都是由DIV元素使用的。通过这种方式，所有DIV元素在放入元素之前和之后遵循相同的测量。

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

下面是使用上述CSS动态创建的HTML示例。

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);

2018-03-04 13:57:24

其他回答

尝试添加填充:0;对身体和删除边缘的divs。

添加background-color:*除background*以外的任何颜色来检查差异。

2017-09-19 15:47:22

尝试使所有元素的所有CSS属性相同。

我有类似的问题，在修复这个问题时，我发现我正在删除一个具有字体属性的元素到Div元素。

在删除带有字体属性的元素后，所有DIV的对齐都被打乱了。为了解决这个问题，我将字体属性设置为所有DIV元素，与放入其中的元素相同。

在下面的例子中，类的Dropped元素”。dldCuboidButton"用font-size:30 px定义。

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

下面是使用上述CSS动态创建的HTML示例。

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);

2018-03-04 13:57:24

CSS中垂直对齐的默认值是baseline &此规则也适用于内联块读取此http://www.brunildo.org/test/inline-block.html

在你的内联块DIV中写入vertical-align:top。

检查这个http://jsfiddle.net/WGCyu/1/

2012-02-14 07:14:52

这个问题是因为你在第二个div上应用了float:left，这使得第二个div在左边，第一个div落在第二个div之后。如果你在第一个div上也使用float:left，你的问题就会消失。

溢出:隐藏不会对你的布局造成任何问题，溢出:隐藏只影响一个div的内部元素，它与外部的其他元素无关。

2012-02-14 07:27:03

查看这个替代示例。这种行为的原因在CSS3模块:line: 3.2中描述。线盒包装[1]:

一般情况下，行盒的开始边与包含它的块的开始边相接触，结束边与包含它的块的结束边相接触。但是，浮动框可能位于包含块边缘和行框边缘之间。因此，尽管在同一行内格式化上下文中的行框通常具有相同的行内进度推进(包含块的行内进度推进)，但如果可用的行内进度空间由于浮动而减少，它们可能会有所不同[…]

如您所见，第三个元素被向下推，尽管它没有overflow属性。原因一定在别的地方。你注意到的第二个行为描述在级联样式表Level 2 Revision 1 (CSS 2.1) Specification: 9.5 Floats [2]:

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，在浮动旁边创建的当前和后续行框将根据需要缩短，以便为浮动的边距框腾出空间。

所有你的显示:inline-block;线高计算:' Line -height'和'vertical-align'属性(very end) [3]:

'inline-block'的基线是它在正常流中的最后一个行框的基线，除非它没有流中的行框，或者它的'overflow'属性有一个计算值而不是'visible'，在这种情况下基线是底边距。

So when you're using floating elements and inline-block elements, the floating element will be pushed to the side and the inline formatting will be recalculated according to 1. On the other hand, the next elements are shortened if they won't fit. Since you're already working with a minimum amount of space, there's no other way to modify your elements then pushing them 2. In this case, the highest element will define the size of your wrapping div, thus defining the baseline 3, while on the other hand the modification of position and width stated in 2 can't be applied to such minimal spaced maximum height elements. In this case a behavior as in my very first demo will result.

最后，溢出:隐藏的原因将防止#firstDiv被推到#container的下边缘，尽管我在第11节中找不到原因。没有溢出:隐藏它的工作方式与2和3所定义的不同。演示

TL;DR:仔细研究一下W3推荐和浏览器中的实现。在我看来，如果你不知道浮动元素对周围元素的所有改变，它们就会显示出意想不到的行为。这是另一个演示，展示了一个常见的问题与浮动。

2012-02-14 07:53:11

为什么这个内联块元素向下推?

推荐文章

最新文章

标签