如何使兩個inser svg元素並排在一個更大的div中

大家好我正在處理html和javascript.And我會問一個非常基本的問題。我寫了一個簡單的代碼嘗試了不同的事情，但無法讓它工作我的壞。我想要做的是我有一個有兩個內部div的div。內部div有一個等於div的大小的svg元素，我希望兩個內部div並排。但是我的div不是等於Ist div大二次寬度小。如何使兩個inser svg元素並排在一個更大的div中

<html> 
<head></head> 
<body> 
<div position:relative; width = "100%"; height = "400px" float:left> 
    <div width = "1000px" height = "400px"; float:left> 
    <svg width = "1000px" height = "400px"> 
    </svg> 
    </div > 
    <div width = "300px" height = "400px"float:left> 
    <svg width = "300px" height = "400px"> 
    </svg> 
    </div> 
</div> 
</body> 
</html>

我該如何做到這一點。 也應我寫的高度和寬度與兩個DIV和SVG或者罰款，如果你想要的divs是寬度相等，只有一個

來源

2012-07-04 A_user

您可能要到'svg'的寬度/高度改爲100％。這樣他們將佔用父容器的空間。 – SomeKittens

謝謝@SomeKittens，但我無法並排排列:( –

編輯我的答案在下面，看到這一點。 – SomeKittens

使用，你需要設置其width值等於。有兩種方法可以做到這一點。首先，你可以手動設置寬度：

<html> 
<head></head> 
<body> 
<div position:relative; width = "100%" height = "400px"> 
    <div width = "1000px" height = "400px" style="float:left"> 
    <svg width = "1000px" height = "400px"> 
    </svg> 
    </div > 
    <div width = "1000px" height = "400px" style="float:right"> 
    <svg width = "1000px" height = "400px"> 
    </svg> 
    </div> 
</div> 
</body> 
</html>

或者，你可以只使用百分比：

<html> 
<head></head> 
<body> 
<div position:relative; width = "100%"; height = "400px"> 
    <div width = "50%" height = "400px" style="float:left"> 
    <svg width = "100%" height = "400px"> 
    </svg> 
    </div > 
    <div width = "50%" height = "400px" style="float:right"> 
    <svg width = "100%" height = "400px"> 
    </svg> 
    </div> 
</div> 
</body> 
</html>

在這兩種情況下，如果你想的div是並排側，一個需求爲float:right，另一個爲float:left。還有其他的方法來完成這個，但是floats很簡單。

來源

2012-07-04 17:24:42 SomeKittens

感謝您的迴應，但他們仍然出現一個在另一個之上沒有並列 –

您是否更改浮游物？你使用IE？ – SomeKittens

我正在使用chrome.Yes我做了一個右和一個左 –

可以SVG標籤中添加浮動

<html> 
<head></head> 
<body> 
<div> 
    <div> 
    <svg width = "1000px" height = "400px" style="float:right"> 
    </svg> 
    </div > 
    <div> 
    <svg width = "300px" height = "400px" style="float:right"> 
    </svg> 
    </div> 
</div> 
</body> 
</html>

如何使兩個inser svg元素並排在一個更大的div中

回答

相關問題