問題用2 DIV稍微偏移

我想對齊（水平）2 <div>（第一個是向上相對於第二），但我得到兩者之間的輕微偏移。問題用2 DIV稍微偏移

守則（http://jsfiddle.net/8wfu3w26/2/）：

#global-ui { 
 
    position: relative; 
 
} 
 
#gui { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 0; 
 
    margin: 20px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 2px solid blue; 
 
} 
 
#buttons-wrapper { 
 
    position: absolute; 
 
    top: 200px; 
 
    right: 0; 
 
    margin: 20px; 
 
    padding: 0; 
 
    border: 2px solid red; 
 
} 
 
#buttons { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 2px solid white; 
 
}

<div id="global-ui"> 
 
    <div id="gui"></div> 
 
    <div id="buttons-wrapper"> 
 
    <div id="buttons"> 
 
     <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button> 
 
     <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button> 
 
    </div> 
 
    </div> 
 
</div>

我得到我的菜單如下結果three.js窗口的右上角：

就像喲你可以看到，藍框的左邊框和紅框的左邊框之間有一個小的水平空間。它們並不完全一致。

在右邊界上，兩者似乎都是對齊的。

我不知道這個問題可能來自，也許從瀏覽器（我用Firefox測試它）？

UPDATE：

陶菲克Injass的解決方案的工作，但我不能得到通過邊框寬度的像這樣的自動計算，以取代" 2 + 'px' "：

document.getElementById('buttons-wrapper').style.width = gui.width - parseInt(document.getElementById('gui').style.borderWidth,10) + 'px';

不幸的是，這並未沒有工作。

如何自動獲取div＃gui的邊框寬度？感謝

來源

2016-06-09 youpilat13

你的意思是說，紅色框的左邊緣似乎1px的更多比藍色方塊框的左側？ –

似乎由JS添加的值在紅色框中額外爲1px，因爲它的寬度爲：351px;因爲藍色有350px。這似乎是這個原因。 – TechYogi

，因爲你使用JavaScript的紅色方塊

在這一行

document.getElementById('buttons-wrapper').style.width = gui.width + 'px';

需要補償邊框寬度來計算並設置寬度，因爲你的邊界是2px的你好，你得到這個效果這條線必須

document.getElementById('buttons-wrapper').style.width = gui.width-2 + 'px';

，並使用此代碼來獲取邊框寬度使用JavaScript動態

var box = document.getElementById('buttons-wrapper'); 
var borderWidth = parseInt(window.getComputedStyle(box,null).getPropertyValue("border-left-width").replace("px",""));

檢查這個plunker https://plnkr.co/edit/PKjEKBEC0lyjWUoSmHQ1?p=preview

來源

2016-06-09 08:02:49

你的解決方案的工作原理，但我不能通過自動計算邊界寬度來代替「2 +'px'」：document.getElementById（'buttons-wrapper'）。style.width = gui.width - parseInt（ document.getElementById（'gui'）.style.borderWidth，10）+'px';我怎樣才能自動獲得div＃gui的邊框寬度？謝謝 – youpilat13

@ user37422您可以使用JavaScript動態獲取邊框寬度，使用此代碼 'var box = document.getElementById（'buttons-wrapper'）; var borderWidth = window.getComputedStyle（box，null）.getPropertyValue（「border-left-width」）;' –

<button>元素默認display: inline-block;其趨向於具有在右側的是（約）4 PX的空間。

嘗試使用：

button{ 
    display: block; 
    float: left; 
    ... 
}

哦，使包裝適應周圍你還需要添加class="clearfix"到#buttons DIV的按鈕。

來源

2016-06-09 06:23:35 Darvanen

這個答案是從stsckoverflow社會追求

採取你可以將這個CSS用於內部DIV：

#inner { 
    width: 50%; 
    margin: 0 auto; 
}

當然，你不必設置寬度爲50％。任何寬度小於包含div將工作。 margin: 0 auto是什麼實際居中。

如果你是針對IE8 +，它可能是最好有這個代替：

#inner { 
    display: table; 
    margin: 0 auto; 
}

它會使內部元件中心水平和它的作品沒有設置具體的寬度。

來源

2016-06-09 06:40:13

試圖爲#gui和＃鍵，包裝30％，它會解決這個問題設置寬度。

#gui, #buttons-wrapper{width:30% !important;}

Here is link of fiddle

請注意：，因爲它的設置覆蓋內嵌的寬度可以設置寬度％按您的要求，也可以刪除重要條件！

希望這可以幫助你。

來源

2016-06-09 06:46:16 TechYogi

問題用2 DIV稍微偏移

回答

相關問題