Question

我左边的div拿着“翼”，左边有一个浮子，但我需要的是中间div（有一个包含div2和3）总是居中，我可以做但是如果窗口的宽度很小，它将中间容器推离屏幕，因为左边的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;
}

Answer 1

如果您使用的是固定宽度div2and3，则可以在页面的min-width元素中添加body样式。将值设置为所有元素的宽度（宽度div1 +宽度div2and3）。

Answer 2

左边（div1）是否包含侧栏等信息？如果你想要的只是一个居中的div，而div1和div3不包含任何信息，请执行：

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

或者只指定div2的宽度并为div1保留宽度，当浏览器的宽度折叠时div1应该会折叠。

Answer 3

这很有效 - 我在Chrome，IE8，FF 4中进行了测试。

左“翼”仍然是实心的（固定宽度），但绝对定位意味着它不会影响中间div的居中。随着视口的宽度减小，它会逐渐礼貌地向左移动到左侧。

将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的位置。）

我可以在页面窗口中创建一个“不牢固”的div吗？

3 个答案: