Question

我的页面中有这个简单的布局

 <div id="content-wrap">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="content" style="height: 550px">

        </div>
        </form>
 </div>

和css：

#content-wrap
{
 clear: both;
 float: left;
 width: 100%;
}
#content
{
 text-align: left;
 padding: 0;
 margin: 0 auto;
 height: 470px;
 overflow: auto;
    width: 760px;
}

div“content”在wrap内部居中，我想做的是在左侧的“content”旁边放另一个div，并用200px几乎宽度固定。我怎么能这样做？

提前感谢您的帮助。

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

抱歉，我误读了你想要的东西。看看这是否更好。

<html>
<head>
<style type="text/css">
    #content-wrap
    {
     background-color: #EEE;
     clear: both;
     float: left;
     width: 100%;
    }
    #content
    {
     background-color: #0F0;
     text-align: left;
     padding: 0;
     margin: 0 auto;
     height: 470px;
     width: 760px;
    }
    #leftbar
    {
     background-color: #F00;
     float: left;
     width: 200px;
     height: 470px;
     margin-left: -200px;
    }
</style>
</head>
<body>
  <div id="content-wrap">
    <form id="form1" runat="server">
      <div id="content">
        <div id="leftbar">

        </div>
      </div>
    </form>
  </div>
</body>
</html>

Answer 2

您可以居中对齐#content-wrap div，然后在其中使用绝对定位作为两个内部div。你正在使用固定宽度的div，所以我不认为这应该是一个问题。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
    #content-wrap {
        position: relative;
        margin: 0 auto;
        width: 900px;
        height: 600px;
        background: #eeeeee;
    }

    #content {
        position: absolute;
        left: 215px;
        width: 470px;
        height: 600px;
        background: #cccccc;
    }

    #sidebar {
        position: absolute;
        background: #aaaaaa;
        left: 0;
        height: 600px;
        width: 200px;
    }
</style>
</head>
    <body>
        <div id="content-wrap">
            <div id="content"></div>
            <div id="sidebar"></div> 
        </div>

    </body>
</html>

将div与css并排放置

2 个答案: