如何..中間有三個中間的div，如果導航員調整大小

請，我有一個divs的問題，我有3個「圖像」水平，圖像必須在一起。

這是默認視圖，如果屏幕足夠大。 Start

如果導航器調整大小，我失去了與＃div2中心。＃div1與左邊對齊，那不是我需要的。 Problem

我需要的是＃div2留在中心，但我不知道這樣做。＃div1和＃div3在導航器外部，沒有一個div可以調整大小，是固定的大小。 What i want

的HTML代碼：

<body id="body"> 
    <div id="wrap"> 
     <div id="baseLeftBg"> 
     </div> 
     <div id="baseContent"> 
     </div> 
     <div id="baseRightBg"> 
     </div> 
    </div> 
</body>

的CSS代碼：

#body { 
    text-align: center; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0px; 
    background: #ffffff; 
    -moz-background-size: cover; 
    background-size: cover; 
    float: inherit; 
} 

#wrap { 
    width: 1484px; 
    margin: 0 auto; 
    text-align:center; 
} 

#baseLeftBg { 
    margin-top: 60px; 
    background: #CDCDCD; 
    width: 286px; 
    height: 776px; 
    float: left; 
} 

#baseContent { 
    margin-top: 60px; 
    background: #A7A7A7; 
    width: 911px; 
    height: 776px; 
    float: left; 
} 

#baseRightBg { 
    margin-top: 60px; 
    background: #CDCDCD; 
    width: 286px; 
    height: 776px; 
    float: left; 
}

我怎樣才能做到這一點？

鏈接小提琴：http://jsfiddle.net/murb83/BChLs/

謝謝！

來源

2012-07-10 murb83

我想你想中間div固定和左右靈活？ – jackJoe 2012-07-10 11:22:09

三個divs必須在一起，但是如果我調整屏幕的大小，中間div必須永遠在中間，其他人可以先在導航器 – murb83 2012-07-10 11:26:07

之外走，就好像所有的錨點位於＃ DIV2。我希望我解釋得很好。 – murb83 2012-07-10 11:28:25

這就是沒有JS工程解決方案現在好了，我......

#wrap { 
    margin-top: 5%; 
    left: 50%; 
    margin-left: -742px; 
    position: absolute; 
    width: 1484px; 
    height: 776px; 
}

來源

2012-07-17 14:20:53 murb83

使包裝器的文本對齊中心將有所幫助。這將顯示中心的元素。

#wrap { 
    width: 1484px; 
    margin: 0 auto; 
    text-align:center; 
}

來源

2012-07-10 11:23:57 Narendra

謝謝！但問題仍然存在＃div1不會離開導航器。像我的第二個圖像一樣做。 :( – murb83 2012-07-10 11:32:48

也許你應該嘗試使動態的，就像百分比：

#baseLeftBg { 
    .. 
    width: 20%; 
    .. 
} 

#baseContent { 
    .. 
    width: 60%; 
    .. 
} 

#baseRightBg { 
    .. 
    width: 20%; 
    .. 
}

來源

2012-07-10 11:38:18 skywlkr

div尺寸是固定的。 – murb83 2012-07-10 11:57:09

其他的解決辦法是使用絕對定位是這樣的：

#wrap { 
.. 
position:relative; 
.. 
} 

#baseLeftBg { 
margin-top: 60px; 
background: #CDCDCD; 
width: 286px; 
height: 776px; 
position:absolute; 
top:0; 
left:0; 
} 

#baseContent { 
margin-top: 60px; 
background: #A7A7A7; 
width: 911px; 
height: 776px; 
position:absolute; 
top:0; 
left:0; 
right:0; 
} 

#baseRightBg { 
margin-top: 60px; 
background: #CDCDCD; 
width: 286px; 
height: 776px; 
position:absolute; 
top:0; 
right:0; 
}

來源

2012-07-10 11:43:33 skywlkr

謝謝，但不起作用，divs必須在一起，但＃div2必須保持在中間。我做了一小段代碼：[舔]（http：///jsfiddle.net/murb83/Wue57/） – murb83 2012-07-10 11:54:20

你爲什麼不考慮使用用於解決你的問題的Javascript？
根據屏幕寬度，你應該有一個更大的包含三個div和javascript的容器，你應該設置左邊距（顯然它可以是負數）。

然後，JS，你也可以處理屏幕上調整爲事件「調整」左旁

來源

2012-07-10 12:21:47 ilSavo

嗨，謝謝！我不知道要用Javascript，但是我會盡力找到相關信息來學習如何做到這一點 – murb83 2012-07-10 13:40:15

#wrap { width：1484px; margin： 0 auto; text-align：center; } – murb83 2012-07-17 14:16:27

我找到了一種方法來做到這一點與jsQuery。

HTML

<body id="body"> 
    <div id="wrap"> 
     <div id="baseLeftBg"> 
     </div> 
     <div id="baseContent"> 
     </div> 
     <div id="baseRightBg"> 
     </div> 
    </div> 
</body>

CSS

#body { 
    text-align: center; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0px; 
    background: #ffffff; 
    -moz-background-size: cover; 
    background-size: cover; 
    float: inherit; 
} 

#wrap { 
    width: 500px; 
    height: 300px; 
} 

#baseLeftBg { 
    background: #CDCDCD; 
    width: 100px; 
    height: 300px; 
    float: left; 
} 

#baseContent { 
    background: #A7A7A7; 
    width: 300px; 
    height: 300px; 
    float: left; 
} 

#baseRightBg { 
    background: #CDCDCD; 
    width: 100px; 
    height: 300px; 
    float: left; 
}

JSQuery

$(window).resize(function(){ 
    $('#wrap').css({ 
    position:'absolute', 
    left: ($(window).width() - $('#wrap').outerWidth())/2, 
    top: ($(window).height() - $('#wrap').outerHeight())/2 
    }); 
}); 

// To initially run the function: 
$(window).resize(); 

var $scrollingDiv = $("#wrap"); 
    $(window).scroll(function(){    
     $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine');    
    });

見行動：http://jsfiddle.net/murb83/BChLs/

來源

2012-07-10 14:38:14 murb83

我發現一個問題，如果我做的瀏覽器比網站小，我不能正確向任何方向滾動，腳本不斷居中集中網站..我也看不到網站的左側部分。 – murb83 2012-07-11 11:58:43

如何..中間有三個中間的div，如果導航員調整大小

回答

相關問題