Question

我尝试做的是使用媒体查询将右列放在左列旁边（现在它位于中间列的旁边）。右列也应该具有左边距10px（因为屏幕尺寸缩小），就像在示例中一样。我添加位置：绝对;右：8px; .right但它不能按我需要的方式工作。谢谢。

＆＃13;

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) {
  body {
      width: 95%;
  }
   .left {
      width: 60%;
      margin-right: 0;
   }
   .middle {
      width: 60%;
      margin-top: 10px;
     clear: both;
   }
   .right {
      width: calc(40% - 10px);
      margin-top: 10px;

  
      
   }
}

＆＃13;

<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<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="middle">
	    <h2>Сenter Column</h2>
	        <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
	</div>
	<div class="right">
	    <h4>Right Column</h4>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	       </ul>
	</div>
	<div style="clear:both; border:none; border-radius: none;"></div>
	<div id="footer">
	    <p>© 2015 Me - the Programmer</p>
	</div>

＆＃13;

使用媒体查询更改列顺序

0 个答案: