調整窗口大小廣告的div保持在同一個地方

嗯..我的英語不是很好，所以我畫我想要什麼..調整窗口大小廣告的div保持在同一個地方

綠色容器這是我的內容包。黑色和紅色正方形，是一些按鈕來訪問另一個頁面。

所以當我調整頁面大小，我想保持畢業論文按鈕的這樣的圖像：

這是我最初的HTML：

<div id="wrap_home_bts"> 
    <div class="bt_woman"></div> 
    <div class="bt_man"></div> 
</div>

這是我的css：

#wrap_home_bts{ 
    position:relative; 
    width:100%; 
    height:100%; 
} 

    .bt_woman{ 
     width:880px; 
     height:389px; 
     background:#FFCC00; 

     position:absolute; 
     left:0; 
     bottom:245px; 

    } 

    .bt_man{ 
     width:733px; 
     height:168px; 
     background:#CC00FF; 

     position:absolute; 
     right:0; 
     bottom:74px; 

    }

但這樣，「按鈕」伴隨着調整大小的窗口。

我清楚嗎？

來源

2013-03-29 Preston

看看媒體查詢：css-tricks.com/css-media-queries – gaynorvader

你是否試圖設置bt_woman和bt_man的寬度而不是px中的％？ –

@WillemVanBockstal以％爲單位的設置寬度不會帶來任何效果。 – 2014-12-09 06:56:01

不是使用左右0px定位塊，將它們定位到50％，然後使用負餘量以您想要的方式對齊它們。這應該工作，但你必須調整頁邊距，以適應完全像你想：

#wrap_home_bts{ 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 

} 

.bt_woman{ 
    width:880px; 
    height:389px; 
    background:#FFCC00; 
    display: block; 
    position:absolute; 
    left:50%; 
    margin-left: -650px; 
    bottom:245px; 

} 

.bt_man{ 
    width:733px; 
    height:168px; 
    background:#CC00FF; 

    position:absolute; 
    display: block; 
    left:50%; 
    margin-right: -650px; 
    bottom:74px; 

}

http://jsfiddle.net/E4mmz/

來源

2013-03-29 16:06:13 Phil

這些按鈕是圖像，所以我不能使用％..我想.. – Preston

.bt_woman和.bt_man絕對定位在#wrap_home_bts它的寬度設置爲100％。這樣#wrap_home_bts的大小將隨着瀏覽器大小的改變而改變，.bt_woman和.bt_man的位置將會跟隨這個元素。 .bt_woman和.bt_man可能會超越#wrap_home_bts。然後你可以用javaScript設置一些寬度到body元素，就像屏幕的寬度一樣。這樣他們將永遠不會改變那裏的位置調整大小。

來源

2013-03-29 16:08:27

調整窗口大小廣告的div保持在同一個地方

回答

相關問題