div權利對居中div

使用html/CSS我試圖把一個小div與其中的兩個圖像到右下方的大中心（與l/r頁邊距設置爲自動）垂直彈性，但400px寬的div裏面充滿了很多東西。我似乎無法得到我需要的東西。div權利對居中div

這是我想要得到的東西，以便如果窗口太寬，綠色框會保留在紅色旁邊，空白區域會放在兩個框的右邊。如果窗口不夠寬，用戶將不得不滾動到右側才能看到綠色框。

我覺得我只是缺少一些超級簡單的解決了這一點。浮動不起作用，因爲它將綠色框對齊到最右邊，並將綠色和紅色之間的空白區域放在一起。我嘗試了各種'位置'css安排，但想要在紅色框外面放置綠色盒子時遇到了麻煩。

EDIT（被要求更多細節）：

我試圖使紅色方框（#main）位置相對的，綠色（#sub）的位置絕對的。我玩過各種各樣的左：px，右：px座標，但發現當我把它拿到紅盒子外面時，它變得不可見。我嘗試了各種位置標籤與對齊標籤組合的組合。我嘗試了內聯塊（我甚至不確定這裏是相關的！）。

然後我正在讀一些關於製作虛擬包裝父母div的東西，所以我試圖做到這一點，並製作了一個#wrapper，我嘗試使用位置相對/絕對的方式進行實驗，但最終導致與紅色塊之上的佈局混淆真的只是一個橫幅和H1）。

對不起，我沒有實際的代碼發佈，但每次我嘗試了一些東西，它沒有工作，我只是刪除了標籤，所以我不會混淆所有這些額外的CSS周圍。我幾天來一直在做這件小事。現在我的代碼已經很少位從以前的嘗試遺留：

#main {width:400px; 
margin-left: auto; 
margin-right: auto; 
padding-bottom:0px; 
overflow:hidden;} 

#sub {right:-10px; 
bottom:100px; 
float:right;}

來源

2013-02-13 Incarnadin

發佈您嘗試過的一些代碼。 – 2013-02-13 02:25:55

HTML

<div id="bigbox"> 
    <!-- content goes here --> 
    <div id="littlebox">SomeImages</div> 
</div>

CSS

#bigbox { 
    width: 900px; 
    margin: 0 auto; 
    position: relative; 
} 

#littlebox { 
    width: 150px; 
    position: absolute; 
    bottom: 5px; 
    right: -160px; // width + a 10px margin if desired 
}

http://jsfiddle.net/eLT9U/1/

來源

2013-02-13 02:36:38

這個工作除了現在littlebox是不可見的。 Firebug確實將它的矩形正好顯示在我想要的位置......但是您只是無法看到它在那裏。這是我的意思，當我說，一旦座標移出bigbox，你不能再看到它了。 – Incarnadin 2013-02-13 02:48:32

請發表一個示例。 – 2013-02-13 02:49:10

在這裏你可以看到，我可以選擇與螢火蟲區域，但實際內容是隱藏的，因爲它在bigbox之外。 http://i50.tinypic.com/2i0rwcn.png – Incarnadin 2013-02-13 02:58:12

http://jsfiddle.net/ferne97/MDWWu/

HTML

<div class="wrap"> 
    <div class="container"></div> 
    <div class="box"></div> 
</div>

CSS

.wrap { 
    position: relative; 
} 

.container { 
    width: 200px; 
    min-height: 420px; 
    margin: 0 auto; 
} 

.box { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    margin-left: 120px; /* half .container width + extra margin */ 
}

對於利潤率左，將您的內容區域的一半再添加任何額外的保證金在此基礎之上，所以用這個例子這將是200/2 = 100 + 20px margin = 120px

來源

2013-02-13 02:40:51 ferne97

這可行，但我更喜歡我的解決方案，因爲沒有「複雜」的數學，也不需要額外的包裝元素。 – 2013-02-13 02:46:10

true jimjimmy1995示例更靈活一些，因爲它不依賴於固定寬度。 – ferne97 2013-02-13 02:46:41

完全沒有想到這一點。如果屏幕上沒有足夠的空間，則可以隨時使用媒體查詢來移除小格子。 – 2013-02-13 02:48:34

div權利對居中div

回答

相關問題