Layout 响应布局代码命令_Layout_Responsive Design

Layout 响应布局代码命令

layout responsive-design

Layout 响应布局代码命令,layout,responsive-design,Layout,Responsive Design,我试图创建一个简单的布局，就像这样文件标题 *{ 保证金：0；填充：0； } html，正文{ 背景：#eee；身高：100%； } h1{ 字体系列：无衬线；颜色：#ddd； } #包装纸{ 最小高度：100%；最大宽度：1000px；保证金：0自动；背景：#fff；溢出：自动；左边框：30px实心#eee；右边框：30px实心#eee；填充：20px 20px 0 20px； } #左撇子{ 背景：黄色；高度：200px；宽度：280px；浮动：左； } #

我试图创建一个简单的布局，就像这样


文件标题
*{
保证金：0；
填充：0；
}
html，正文{
背景：#eee；
身高：100%；
}
h1{
字体系列：无衬线；
颜色：#ddd；
}
#包装纸{
最小高度：100%；
最大宽度：1000px；
保证金：0自动；
背景：#fff；
溢出：自动；
左边框：30px实心#eee；
右边框：30px实心#eee；
填充：20px 20px 0 20px；
}
#左撇子{
背景：黄色；
高度：200px；
宽度：280px；
浮动：左；
}
#rightCol{
背景：红色；
高度：200px；
左边距：320px；
}
@仅介质屏幕和（最大宽度：700px）{
#左撇子{
浮动：无；
}
#rightCol{
浮动：无；
利润率：20px0；
}
}
左列
右柱

它是固定宽度的左栏和流体右栏

当窗口调整大小时，我希望左栏降到右栏的下方-在本例中不是这样

我知道这是因为代码顺序

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


文件标题
*{
保证金：0；
填充：0；
}
html，正文{
背景：#eee；
身高：100%；
}
h1{
字体系列：无衬线；
颜色：#ddd；
}
#包装纸{
最小高度：100%；
最大宽度：1000px；
保证金：0自动；
背景：#fff；
溢出：自动；
左边框：30px实心#eee；
右边框：30px实心#eee；
填充：20px 20px 0 20px；
}
#左撇子{
背景：黄色；
高度：200px；
宽度：280px；
浮动：左；
}
#rightCol{
背景：红色；
高度：200px；
浮动：对；
}
@仅介质屏幕和（最大宽度：700px）{
#左撇子{
浮动：无；
}
#rightCol{
浮动：无；
利润率：0.20px0；
}
}
右柱
左列

我现在的问题是如何使正确的列拉伸以填充空间

负边际我知道我可以这样用负的边距来做


文件标题
*{
保证金：0；
填充：0；
}
html，正文{
背景：#eee；
身高：100%；
}
h1{
字体系列：无衬线；
颜色：#ddd；
}
#包装纸{
最小高度：100%；
最大宽度：1000px；
保证金：0自动；
背景：#fff；
溢出：自动；
左边框：30px实心#eee；
右边框：30px实心#eee；
填充：20px 20px 0 20px；
}
#左撇子{
背景：黄色；
高度：200px；
宽度：280px；
浮动：左；
}
#rightCol{
背景：红色；
高度：200px；
宽度：100%；
左边距：-290px；
浮动：对；
}
#右内{
左边距：290px；
}    
@仅介质屏幕和（最大宽度：700px）{
#左撇子{
浮动：无；
}
#rightCol{
浮动：无；
利润率：0.20px0；
}
#右内{
左边距：0；
}
}
右柱
左列

负边距是唯一的方法吗？它会在我的代码中添加大量div，很难理解您所列出的所有示例的目的，但是

按以下方式订购您的div：

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

向左浮动两列，为右列指定最大宽度：

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

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

如果你想看到正确的栏目延伸，你需要在其中添加一些内容（例如-lorum ipsum）。

请发布你的HTML和CSS。我试着从master.CSS文件中获取CSS，但是什么都没有。尝试创建一个JSFIDLE。嗨，Lowkase，我已经用代码和JSFIDLE进行了更新。我必须添加代码来添加JSFIDLE-如果我首先使用左列，当窗口调整大小时，它将显示在右列上方。Lowkase，这是您的代码-我已将右列重命名为内容（我认为这更容易理解）。当窗口调整大小时，我需要将内容放在顶部。我知道你现在在说什么。当容器的宽度减小到无法容纳左栏和右栏时，是否希望左栏向下“捕捉”，右栏向左“捕捉”？回到你所拥有的，正确的col float：正确的，订购col，使正确的col出现在顶部是正确的方法，除非你想让col“快速”就位。

    <!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 id="wrapper">
    <div id="leftCol">
        <h1>Left Col</h1>
    </div>
    <div id="rightCol">
        <h1>Right Col</h1>
    </div>
</div>

#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;
}