在父母內部創建一個浮動div和兩個靜態div

我知道在浮動div主題上打開了100個主題，但我無法找到有關我的問題的答案，因爲某些原因，沒有爲我工作。我有一個父div，我想把兩個靜態div一個向右，一個向左，另一個div包含它們之間浮動的主要信息，即在它們之間的距離相等。但由於某種原因，它不會爲我工作。每改變一次，我都會把右邊的div下移，或者把主要的div粘到右邊\左邊。這裏是我的代碼：在父母內部創建一個浮動div和兩個靜態div

<html> 
<head> 
<link rel = "stylesheet" href = "tryout.css"> 
</head> 
<body> 
    <div id="super_wrap"> 
    <div class="ADDVERTISEMENT"><img src="add.jpg" /></div> 
    <div id="wrap"> 
    some data 
    </div> 
    <div class="ADDVERTISEMENT2"><img src="add.jpg" /></div> 
    </div> 

</body> 
</html>

和CSS：

.ADDVERTISEMENT{ 
margin-top:10px; 
float:left; 
margin-left:0 auto; 
margin-right:0 auto; 
} 
.ADDVERTISEMENT2{ 
margin-top:10px; 
float:right; 
margin-left:0 auto; 
margin-right:0 auto; 
} 
#wrap { 
display: inline-block; 
width:960px; 
padding:10px; 
background:red; 
margin-left:0 auto; 
margin-right:0 auto; 
} 
#super_wrap{ 
width:100%; 
display: inline-block; 
}

來源

2013-07-26 Anton.P

將

text-align:center

上#super_wrap和移動#wrap是第三，#ADDVERTISEMENT2後。然後#wrap元素應居中。

注意：你仍然有#wrap下探至下一行，如果沒有足夠的空間用於所有3內#super_wrap

這裏的工作小提琴：http://jsfiddle.net/qN4Tp/

來源

2013-07-26 15:51:20 Faust

嗨，它在Chrome瀏覽器上工作，但沒有在瀏覽器上工作。任何想法爲什麼以及如何解決它？ –

它適用於ie 9和10（請參閱jsfiddle），所以如果您在其中一個版本中遇到問題，請仔細檢查您的代碼。關於這些聲明沒有什麼不尋常之處，所以我懷疑IE8或IE7的具體問題（我不明白，因爲jsfiddle不支持9以下的IE）。如果是IE6，那麼你會遇到問題，因爲你不能在IE6中將div設置爲嵌入塊。 – Faust

非常感謝。我現在明白了。完美地工作。 –

你有幾個錯誤的CSS聲明，這會導致你的問題：

margin-left:0 auto; 
margin-right:0 auto;

運用速記僅適用於margin:而不是margin-right:

要麼margin:0 auto;或

margin-left:auto; 
margin-right:auto;

如果你想中間div來在中間顯示，你可以嘗試訂購您的HTML這樣的：

廣告1 廣告2 裹

觀看演示： http://jsbin.com/oqujet/1/edit

來源

2013-07-26 15:56:31 user1721135

嗨，你的解決方案的問題是，它只是因爲中間div的百分之百，如果你改變它爲960 putin disapars。我有餘量的事情會考慮在內。謝謝。 –

你可以設置父母 – user1721135

的寬度爲true，但它會是靜態的，我正在尋找一個動態解決方案。 –

在父母內部創建一個浮動div和兩個靜態div

回答

相關問題