忽略文本高度使用浮动左不起作用，但是正确

我想使用html和css .so做一个盒子模型我做了一个嵌套divs并使用左上角来正确定位。这里是jsfiddle预览。忽略文本高度使用浮动左不起作用，但是正确

，但是当我添加了一个文本资料核实垂直对齐得到改变，而这并不是我want.however在左侧正确的位置，因为我想文本。

我的经验，我给了float，因此DIV应该忽略span标签当我使用float:right但不float:left。至于height.it运作的，你可以看到当我使用正确的文本被正确地定位在正确的，但为什么不是跟左？

我想要的文字左side.why对齐像这样？我该怎么定位的文字留下，而不影响相对的div

HTML代码

<div class="squ"> 
    <div id="sone" class="margina"> 
    <span class="boxtext">margin</span> 
     <div id="stwo" class="margina"> 
      <span class="boxtext">border</span> 
      <div id="sthree" class="margina"> 
       <span class="boxtext">padding</span> 
       <div id="sfour" class="margina"> 
        <span class="boxtext">elem</span> 
       </div> 
      </div> 
     </div> 
    </div>

的CSS全文文本

.boxtext{ 
    display:inline; 
    float:left; 
    color:#FFF; 
}

来源

2015-11-25 Fast Snail

可以显示完整的CSS –

@sebastianbrosch这里是jsfiddle https://jsfiddle.net/9kL3zoxe/你可以看到完整的CSS那里 –

使用框大小：边框;的概念，它会解决你的问题 –

这种情况正在发生becaus e您的.margina是position:relative;尽管您正在指定top & left的位置，但元素仍处于相对位置，这会产生步进效果。我把它改成absolute并能正常工作：

JSFiddle

.margina{ 
    position:absolute; 
    top:20px; 
    left:30px; 
}

为了完整起见，这是怎样的浏览器上做的相对.margina的top & left定位之前实际上是渲染页面div的。我已经添加overflow:hidden他们证明：

JSFiddle

.margina{ 
    overflow:hidden; 
    position:relative; 
    top:20px; 
    left:30px; 
}

来源

2015-11-25 14:22:48

非常感谢你。 –

您可以将类margina或文本框的绝对位置。你所做的不是为你工作，因为浮动通常是相对定位的，它与父元素发生冲突。 float：right的原因是因为它不需要定位。

来源

2015-11-25 15:10:36 Zuse

忽略文本高度使用浮动左不起作用，但是正确

回答

相关问题