2016-11-20 64 views
0

我在使用Javascript修改HTML時遇到問題。一個例子可以在這裏找到:https://jsfiddle.net/02mwyvyo/爲什麼我的精確網頁佈局不準確?

我的目標是將一個特定元素向下移動頁面。我試圖通過在目標元素之前插入一個間隔符div來做到這一點。間隔div的風格屬性是style="display: inline-block; width=1px; height=100px;"

這裏是我使用的代碼:

function describeDOMRect(rect) { 
    return "{ top: " + rect.top + ", left: " + rect.left + ", bottom: " + rect.bottom + ", right: " + rect.right + " }" 
} 

function addVerticalSpacer() { 
    var div = document.getElementsByClassName("target-div")[0] 
    var bounds = div.getBoundingClientRect() 

    console.log("old bounds: " + describeDOMRect(bounds)) 

    var spacerHeight = 100 
    var newTop = bounds.top + spacerHeight 
    var spacer = document.createElement("div") 

    spacer.className = "spacer" 
    spacer.setAttribute("style", "display: inline-block; width: 1px; height: " + spacerHeight + "px;") 

    div.parentNode.insertBefore(spacer, div) 

    bounds = div.getBoundingClientRect() 

    console.log("new bounds: " + describeDOMRect(bounds)) 
} 

,這裏是應用於div的CSS屬性:

div { 
    border: none; 
    border-width: 0; 
    padding: 0; 
    margin: 0; 
} 

當我運行上面的代碼,這是我在看控制檯:

old bounds: { top: 26, left: 8, bottom: 26, right: 729 } 
new bounds: { top: 112, left: 8, bottom: 112, right: 729 } 

注意舊的頂部位置是26,所以我期望新的頂部是126,但它我s 112.

爲什麼會發生這種情況?我能做些什麼來糾正它?

回答

2

你實際上是將一些文本一些文字之間的間隔div。由於它是一個inline-block它被追加到第一行的末尾。

enter image description here

+0

啊。如何讓它在文本之後開始打破? – par

+0

使用'display:block'而不是'inline-block'。你打算在哪裏插入視覺空間? – connexo

+0

請將其添加到您的答案,我會接受它。你是我的英雄。 – par

相關問題