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

我想使用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

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

回答

相關問題