减小屏幕尺寸时将列移动到底部

时间:2015-09-11 12:08:56

标签: html css css-position

现在结构如下:

左栏
右栏
中栏

我需要制作下一个结构:

左栏
中柱
右栏

问题是应该在不改变现有结构的情况下完成。即在更大的屏幕上,现有结构是完美的,但从@media屏幕和(最大宽度:650px)开始,结构应该如我所描述的那样改变。 我试图改变定位,但它似乎无法正常工作。 谢谢!

请参阅下面的代码。

https://jsfiddle.net/vw4b99b1/1/



    div {
      border-radius: 4px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
    }
    #header {
      height: 52px;
      width: calc(100% - 16px);
      background-color: #B2D490;
      z-index: 1;
      position: fixed;
      top: 10px;
    }
    h1 {
      color: #FFFFFF;
      padding-left: 25px;
      margin: 0;
      display: inline;
      font-size: 27px;
      line-height: 50px;
    }
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding-left: 10px;
      margin: 10px 0 10px 0px;
      color: #00457D;
    }
    .left {
      width: 300px;
      background-color: #C7E6FF;
      float: left;
      margin-top: 64px;
      margin-right: calc(50% - 450px);
    }
    .middle {
      width: 300px;
      background-color: #DEF0FF;
      margin-top: 64px;
      float: left;
    }
    .right {
      width: 300px;
      background-color: #C7E6FF;
      float: right;
      margin-top: 64px;
    }
    #footer {
      height: 35px;
      width: 100%;
      background-color: #57C449;
      clear: both;
      position: relative;
      margin-top: 10px;
    }
    p {
      color: #00579E;
    }
    #footer p {
      color: #FFFFFF;
      text-align: center;
      margin: auto;
      line-height: 35px;
    }
    span {
      color: #D4EBFF;
    }
    @media screen and (max-width: 980px) {

      .left {
        width: 60%;
        margin-right: 0;
      }
      .middle {
        width: 60%;
        margin-top: 10px;
        clear: both;
      }
      .right {
        width: calc(40% - 10px);
        margin-top: 64px;
      
      }
    }

    @media screen and (max-width: 650px) {

        .left {
        width: 100%;
        margin-right: 0;
      }
      .middle {
        width: 100%;
        margin-top: 10px;
    clear: both;
      }
      
      .right {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;

      }
      
    }

    	<body>
    	<div id="header">
    	    <h1>My <span>Resume</span></h1>
    	</div>
    	<div class="left">
    	    <h2>Left Column</h2>
    	        <ul>
    	            <p>Some Text</p>
    	            <p>Some Text</p>
    	        </ul>
    	</div>
        <div class="right">
    	    <h4>Right Column</h4>
    	        <ul>
    	            <p>Some Text</p>
    	            <p>Some Text</p>
    	       </ul>
    	</div>
    		<div class="middle">
    	    <h2>Middle Column</h2>
    	        <ul>
                    <li><p>Some Text</p></li>
                    <li><p>Some Text</p></li>
            </ul>
    	</div>
    	
    	<div style="clear:both; border:none; border-radius: none;"></div>
    	<div id="footer">
    	    <p>© 2015 - the Programmer</p>
    	</div>
    	</body>
&#13;
&#13;
&#13;

0 个答案:

没有答案