在另外兩個人之間定位div

-2

我有3個垂直div。第一個應該有100％的寬度，第二個應該有一個寬度爲283px的圖像，第三個div應該有100％的寬度。有誰知道如何在另外兩個div中間定位圖像div 100％？在另外兩個人之間定位div

我想這一點，但不要對我的作品

<div class="content"> 
<div class="first">1</div> 
<div class="third">3</div> 
<div class="second">2</div> 
</div> 

.first{ 
    width:100%; 
    float:left; 
    background:yellow; 
} 
.third{ 
    width:100% 
    float:right; 
    background:pink; 
} 
.second{ 
    width:283px; 
    overflow:hidden; 
    background:blue; 
}enter code here

來源

2012-12-07 Danilo Siqueira

你可以張貼一些代碼？ –

爲什麼不把它做成100％，然後使用'text-align：center'來集中圖像？ –

那麼你想要他們並排，還是一個在另一個之上？ –

如果你的目的是要定位彼此相鄰的div水平比你不能把它們中的任何一個設置爲100％的寬度，因爲相鄰的所有元素的總數只能達到100％。

如果你的網站的寬度比你的最簡單的解決方案是將左右div的寬度設置爲像素的寬度（網站的寬度-283）/ 2，那麼它們會漂浮在一起。你也可以用％來做到這一點。

但是，如果您的網站是流動寬度，那麼您需要計算出所有3個div的百分比，即每個33％，但這意味着中間不會完全是283px。

我能想到的完全按照你想要的方式工作的唯一方法就是在頁面加載之後使用Javascript調整元素的大小，然後可以獲得瀏覽器維度並全部處理。

來源

2012-12-07 16:04:48 ProWebMonkey

讀完了幾次，我想我得到你想要做什麼。

你想要他的中間div位於其他兩個div之間。

你需要給股利一類是這樣的：

.middlediv 
{ 
    width: 283px; 
    margin-left: auto; 
    margin-right: auto; 
}

這也可以寫成這樣：

.middlediv 
{ 
    width: 283px; 
    margin: 0px auto; 
}

來源

2012-12-07 15:57:23

你的問題是不明確的，所以我做了兩種可能的解釋：http://jsfiddle.net/EbBzY/

HTML

<h1>Option 1</h1> 
<div class="main"> 
    <div class="content"> 
     <div class="first">1</div> 
     <div class="second">2</div> 
     <div class="third">3</div> 
    </div> 
</div> 

<h1>Option 2</h1> 
<div class="content"> 
    <div class="first">1</div> 
    <div class="second">2</div> 
    <div class="third">3</div> 
</div>

CSS

.main{ 
    display:table; 
    width:100%; 
    margin-bottom:100px; 
} 
.main .content{ 
    display:table-row; 
} 
.main .content div{ 
    display:table-cell; 
} 

.first{ 
    background:yellow; 
} 
.third{ 
    background:pink; 
} 
.second{ 
    background:blue; 
    width:283px; 
    margin:auto; 
}

來源

2012-12-07 16:43:57 Shmiddty

在另外兩個人之間定位div

回答

相關問題