文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >响应式布局代码顺序

问响应式布局代码顺序
EN

Stack Overflow用户
提问于 2013-03-14 22:05:15
回答 1查看 174关注 0票数 0

我正在尝试创建一个简单的布局，如下所示

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

http://jsfiddle.net/Y3kvj/

代码语言：javascript
复制
    <!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/

代码语言：javascript
复制
    <!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>

我现在的问题是如何使正确的列伸展，使其填充空间。

负边距

我知道我可以像这样用负边际做这件事。

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

http://jsfiddle.net/vkZPj/

代码语言：javascript
复制
    <!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

layout
responsive-design
EN

回答 1

Stack Overflow用户

发布于 2013-03-14 23:13:45

对于你列出的所有例子，我很难理解你想要什么，但是……

这样排序你的div：

代码语言：javascript
复制
<div id="wrapper">
    <div id="leftCol">
        <h1>Left Col</h1>
    </div>
    <div id="rightCol">
        <h1>Right Col</h1>
    </div>
</div>

将overflow:隐藏在#wrapper中：

代码语言：javascript
复制
#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;
}

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

代码语言：javascript
复制
#leftCol{
  background:yellow;
  height:200px;
  width:280px;
  float:left;

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

如果你想看到右边的列伸展，你需要在其中放一些内容(例如- lorum ipsum)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/15411511

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档