我可以使一個div不是「固體」的頁面窗口？

我在左邊拿着「wing」的div，左側有一個float，但我需要的是中間div（有一個div2and3）總是居中，我可以這樣做，但如果寬度的窗口很小，因爲左邊的div鎖定在邊緣，所以它將中間的容器推出屏幕。我可以使一個div不是「固體」的頁面窗口？

我需要左邊的div不是「固定的」，這樣它就可以離開屏幕，而不會影響中間div的自動邊距。任何人？如果你需要更多的解釋，我只能再打20分鐘（即時課堂），我的網絡昨晚/今天早上我們會看到我回家的時候，如果它回來了。

（忽略我在這是我們剛剛在這個類做的項目背景水族館）

擷取畫面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Banta - Homepage</title> 
<link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
<style type="text/css"> 
body { 
    background-image: url(images/backgroundd.png); 
} 
body,td,th { 
    color: #0d2927; 
} 
</style> 
</head> 
<body> 
<div id="maincont"> 
<div id="middlecont"> 
<div id="leftwing"> 
</div> 
<div id="header"> 
</div> 
<div id="body"> 
Lorem ipsum doler sit AMETTTTTTTTTTTTTTT FILLER TEXT FILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXT 
</div> 

</div> 
<div id="rightwing"> 
</div> 
</div> 

</body> 
</html> 



    @charset "utf-8"; 
/* CSS Document */ 

body{ 
    font-family:Verdana, Geneva, sans-serif; 
} 

#maincont { 
    margin:auto; 
    width:1518px; 
    height:782px; 
} 

#leftwing{ 
    min-width:0%; 
    background-image:url(images/leftside.png); 
    width:405px; 
    height:449px; 
    position:absolute; 
    left:-405px; 
} 

#rightwing{ 
    float:right; 
    background-image:url(images/rightside.png); 
    width:405px; 
    height:449px; 
    margin-top:-782px; 
} 

#middlecont{ 
    position:relative; 
    margin:auto; 
    width:708px; 
    height:782px; 
} 

#header{ 
    background-image:url(images/headhome.png); 
    width:708px; 
    height:150px; 
} 

#body{ 
    background-image:url(images/bodybg1.png); 
    width:708px; 
    height:632px; 
}

來源

2011-04-04 Eric Banta

你可以明確地說出你的問題在一兩句話？ – Blender 2011-04-04 20:06:37

你想在屏幕縮小時將左邊的div放到哪裏？你想讓它崩潰嗎？你可以使用最小寬度。如果你爲你的div的基本結構提供了一些代碼，它會有很大的幫助。 – mrtsherman 2011-04-04 20:09:25

基本上是這樣的，我希望左側的「翼」在觀察口縮小時逐漸崩潰並隱藏圖像。這裏是代碼： – 2011-04-05 14:27:32

這工作 - 我在Chrome，IE8，FF 4.測試它

左「翼」仍是固體（固定的寬度），但絕對定位意味着它不影響的定心中間格。隨着觀察口寬度的減小，它會逐漸地向左邊逐漸移動。

將div1 放入 middleDiv中，並使用絕對定位 - 必須將{position：relative}應用於中間div。

<!DOCTYPE html> 

<html> 
<head> 
<style> 
    div{outline:1px solid gray;} 
    #div1{position:absolute;height:300px;width:100px;left:-100px;} /*the value of the left property should be negative the value of the div's width */ 
    #div2, #div3{height:200px} 
    #middleDiv{width:300px;margin:auto;position:relative;} 
</style> 
</head> 

<body> 
    <div id="middleDiv"> 
     <div id="div1"></div> 
     <div id="div2"></div> 
     <div id="div3"></div> 
    </div> 
</body> 
</html>

（注：輪廓不會在IE7或更少的工作，它只是這裏要說明的div的位置。）

來源

2011-04-04 20:26:56 Faust

我真的希望這可以工作，但摺疊頁面時我仍然遇到同樣的問題，左側的「翼」不會移動到左側。 – 2011-04-05 14:24:00

不知道爲什麼它不適合你。你可以在http://jsfiddle.net/aDZEq/看到它的工作。對不起，我沒有在你的代碼示例中使用標記，但我正在關閉你提供的圖形，它不使用同名的div，所以我不能告訴你的每個標記divs是爲了。 – Faust 2011-04-05 18:16:51

哦，我修好了，問題是我在所有的div上都有的容器，一旦我刪除了它的工作！非常感謝！ – 2011-04-05 19:32:48

如果您使用固定寬度的div2and3，你可以爲您的頁面的body元素添加min-width樣式。使所有元素的組合寬度的值（寬度爲div1 +寬度爲div2and3）。

來源

2011-04-04 20:08:37

左側（div1）是否包含側欄等任何信息？如果你想要的是一個居中的DIV，和DIV1和DIV3不包含任何信息，這樣做：

<div align="center"> 
    <div style="width: 80%" /> <!-- set your own percentage --> 
</div>

或者只是指定DIV2的寬度和先不談寬度DIV1和DIV1應合攏時，瀏覽器的寬度會崩潰。

來源

2011-04-04 20:25:10

我可以使一個div不是「固體」的頁面窗口？

回答

相關問題