layout - レスポンシブレイアウトコードの順序

Question

私はそのような単純なレイアウトを作成しようとしています

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

    <!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>

今の私の問題は、スペースを埋めるように正しい列をどのように伸ばすかです。

負のマージン

私はそうするような負のマージンでこれを行うことができることを知っています

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を追加します

score 0 · Accepted Answer

あなたがリストしたすべての例であなたが望むものを理解するのに苦労していますが....

div を次のように並べます。

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

#wrapper に overflow:hidden を追加します。

#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)。

layout - レスポンシブレイアウトコードの順序

負のマージン

1 に答える 1

Related

Reference