0

我正在尝试创建一个像这样的简单布局

http://www.ttmt.org.uk/forum/col-1.html

http://jsfiddle.net/Y3kvj/

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <link rel="stylesheet" href="css/master.css" />

      <!--[if lt IE 9]>
             <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        html, body{
          background:#eee;
          height:100%;

        }
        h1{
          font-family:sans-serif;
          color:#ddd;
        }
        #wrapper{
          min-height:100%;
          max-width:1000px;
          margin:0 auto;
          background:#fff;
          overflow:auto;
          border-left:30px solid #eee;
          border-right:30px solid #eee;
          padding:20px 20px 0 20px;
        }
        #leftCol{
          background:yellow;
          height:200px;
          width:280px;
          float:left;
        }
        #rightCol{
          background:red;
          height:200px;
          margin-left:320px;
        }

        @media only screen and (max-width:700px){
          #leftCol{
            float:none;
          }
          #rightCol{
            float:none;
            margin:20px 0 0 0;
          }
        }
      </style>

      </head>

    <body>

      <div id="wrapper">


        <div id="leftCol">

          <h1>Left Col</h1>

        </div><!-- #leftCol -->


        <div id="rightCol">
          <h1>Right Col</h1>

        </div><!-- #rightCol -->


      </div><!-- #wrapper -->





      <!--jQuery -->


    </body>

    </html>

它是固定宽度的左列和流动的右列

当窗口调整大小时，我希望左列低于右列 - 在这个例子中它没有

我知道这是因为代码顺序。

如果我在窗口调整大小时将左列放在右列下方，它会按照我的意愿下降。

http://www.ttmt.org.uk/forum/col-2.html

http://jsfiddle.net/x8bKD/

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <link rel="stylesheet" href="css/master.css" />

      <!--[if lt IE 9]>
             <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        html, body{
          background:#eee;
          height:100%;
        }
        h1{
          font-family:sans-serif;
          color:#ddd;
        }
        #wrapper{
          min-height:100%;
          max-width:1000px;
          margin:0 auto;
          background:#fff;
          overflow:auto;
          border-left:30px solid #eee;
          border-right:30px solid #eee;
          padding:20px 20px 0 20px;
        }


        #leftCol{
          background:yellow;
          height:200px;
          width:280px;
          float:left;

        }
        #rightCol{
          background:red;
          height:200px;
          float:right;
        }


        @media only screen and (max-width:700px){
          #leftCol{
            float:none;
          }
          #rightCol{
            float:none;
            margin:0 0 20px 0;
          }
        }
      </style>

      </head>

    <body>

      <div id="wrapper">

        <div id="rightCol">
          <h1>Right Col</h1>

        </div>

        <div id="leftCol">

          <h1>Left Col</h1>

        </div>


      </div><!-- #wrapper -->




    </body>

    </html>

我现在的问题是如何使正确的 col 伸展以填充空间。

负边距

我知道我可以像这样以负边距做到这一点

http://www.ttmt.org.uk/forum/col-3.html

http://jsfiddle.net/vkZPj/

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <link rel="stylesheet" href="css/master.css" />

      <!--[if lt IE 9]>
             <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        html, body{
          background:#eee;
          height:100%;
        }
        h1{
          font-family:sans-serif;
          color:#ddd;
        }
        #wrapper{
          min-height:100%;
          max-width:1000px;
          margin:0 auto;
          background:#fff;
          overflow:auto;
          border-left:30px solid #eee;
          border-right:30px solid #eee;
          padding:20px 20px 0 20px;
        }


        #leftCol{
          background:yellow;
          height:200px;
          width:280px;
          float:left;

        }
        #rightCol{
          background:red;
          height:200px;
          width:100%;
          margin-left:-290px;
          float:right;
        }
        #rightCol-inner{

          margin-left:290px;
        }    

        @media only screen and (max-width:700px){
          #leftCol{
            float:none;
          }
          #rightCol{
            float:none;
            margin:0 0 20px 0;
          }
          #rightCol-inner{

            margin-left:0;
          }
        }
      </style>

      </head>

    <body>

      <div id="wrapper">

        <div id="rightCol">
          <div id="rightCol-inner">
             <h1>Right Col</h1>
          </div><!-- #rightCol-inner -->

        </div>

        <div id="leftCol">

          <h1>Left Col</h1>

        </div>


      </div>


    </body>

    </html>

负边距是唯一的方法吗 - 它会在我的代码中添加大量的 div

4

1 回答 1

0

通过您列出的所有示例，很难理解您想要什么，但是....

以这种方式订购您的 div：

<div id="wrapper">
    <div id="leftCol">
        <h1>Left Col</h1>
    </div>
    <div id="rightCol">
        <h1>Right Col</h1>
    </div>
</div>

在#wrapper 中放置一个溢出：隐藏：

#wrapper{
  min-height:100%;
  max-width:1000px;
  margin:0 auto;
  background:#fff;
  overflow:hiddeen;
  border-left:30px solid #eee;
  border-right:30px solid #eee;
  padding:20px 20px 0 20px;
}

将两列都向左浮动，给右列一个最大宽度：

#leftCol{
  background:yellow;
  height:200px;
  width:280px;
  float:left;

}
#rightCol{
  background:red;
  height:200px;
  max-width:500px;
  float:left;
}

如果您想看到正确的列伸展，您需要在其中放入一些内容（例如 - lorum ipsum）。

于 2013-03-14T15:13:44.843 回答