在沒有引導的情況下製作頁面的左側和右側

我製作了一個網頁，現在我正在嘗試做出響應。這是非常簡單的頁面，包含註冊表單和一些鏈接左側+右側。在沒有引導的情況下製作頁面的左側和右側

的結構是非常簡單的，如：

<div id="wrapper"> 
    <div id="main-content">  
    <div class="text-intro"> 
     .. some text 
    </div> 

    <div id="left-sidebar">    
     <div id="navigation"> 
       .. some links 
     </div> 
    </div> 

    <div id="content"> 
     <div id="form"> 
      .. the form on the right side 
     </div> 
    </div> 
</div>

我試圖從一些教程添加媒體查詢，但它不工作，我不知道爲什麼和如何做到這一點。這是查詢

@media only screen and (max-width: 480px) { 
      #wrapper, #main-content, #content, #form{  
       float: left; 
       width: 100%; 
      }  

}

這是上面的源代碼的完整演示：https://jsfiddle.net/q97odta6/

誰能幫一點嗎？

來源

2017-06-19 Ivan

試試看portport meta標籤添加到標題標籤。如果不加在頭標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0">

來源

2017-06-19 08:04:31

謝謝，但我有這個在我的腦袋已經'' – Ivan

刪除媒體查詢中id內容的」margin-left property「。如果這是不正確的，請告訴我 –

這是一種工作，但我需要這個左邊的屬性 – Ivan

以下試試這個，全屏：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
#wrapper { 
 
    width: 1200px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
} 
 
section { 
 
    display: flex; 
 
} 
 
aside { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    background: Khaki; 
 
} 
 
article { 
 
    width: 400px; 
 
    text-align: center; 
 
    background: Salmon; 
 
} 
 
@media screen and (max-width: 767px) { 
 
    section { 
 
    flex-direction: column; 
 
    } 
 
    article { 
 
    width: 100%; 
 
    } 
 
}

<div id="wrapper"> 
 
    <section> 
 
    <aside>    
 
     <nav> 
 
     links 
 
     </nav> 
 
    </aside>  
 
    <article> 
 
     text 
 
    </article> 
 
    <aside> 
 
     <form> 
 
     form 
 
     </form> 
 
    </aside> 
 
    </section> 
 
</div>

來源

2017-06-19 08:19:49 VXp

這是你在找什麼？

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background: #f5f5f5; 
 
} 
 

 
.qt4 { 
 
    transition: .4s ease-in-out 0s; 
 
} 
 

 
* { 
 
    font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    letter-spacing: .02em; 
 
    font: 10; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    max-width: 1000px; 
 
    width: 100%; 
 
    height: ; 
 
} 
 

 
.box { 
 
    width: calc(100% - 20px); 
 
    height: calc(100% - 20px); 
 
    background: white; 
 
    margin: 10px auto; 
 
    border-radius: 5px; 
 
    position: relative; 
 
    box-shadow: 0 1px 5px rgba(68, 68, 68, 0.26); 
 
} 
 

 
.me.box { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 10px; 
 
    z-index: 2; 
 
} 
 

 
.sides { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 100%; 
 
} 
 

 
.side_containers { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    position: absolute; 
 
} 
 

 
.left { 
 
    left: 0px; 
 
} 
 

 
.right { 
 
    right: 0px; 
 
} 
 

 
.center { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: calc(100% - 400px); 
 
    height: 400px; 
 
    z-index: 1; 
 
} 
 

 
.name { 
 
    font-size: 40px; 
 
    text-align: center; 
 
    color: red; 
 
    padding-top: 150px; 
 
    color: black; 
 
    opacity: .15; 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 
    .side_containers { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    } 
 
    .side_containers .name { 
 
    padding-top: 120px; 
 
    } 
 
    .sides { 
 
    width: 50%; 
 
    height: 300px; 
 
    } 
 
    .center { 
 
    width: 100%; 
 
    height: 400px; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 400px) { 
 
    .side_containers { 
 
    height: auto; 
 
    } 
 
    .sides { 
 
    width: 100%; 
 
    height: 300px; 
 
    position: relative; 
 
    } 
 
}

<body> 
 
    <div class="qt container"> 
 

 
    <div class="qt center"> 
 
     <div class="me box"> 
 

 
     <div class="qt name">Center</div> 
 

 
     </div> 
 

 
    </div> 
 
    <div class="qt side_containers"> 
 
     <div class="qt sides right"> 
 
     <div class="right box"> 
 

 
      <div class="qt name">Right</div> 
 

 
     </div> 
 

 
     </div> 
 
     <div class="qt sides left"> 
 
     <div class="left box"> 
 

 
      <div class="qt name">Left</div> 
 

 
     </div> 
 

 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 
</body>

來源

2017-06-19 09:03:46

這看起來不錯，除了中央div應該在桌面上的兩個（左側和右側）之上。讓我試着在我的代碼中實現這一點 – Ivan

爲什麼這麼複雜..我很艱難，我只需要在媒體查詢兩端選擇並使它們左移。對不起，但我似乎無法在當前視圖中實現此功能。 – Ivan

下面是一些短得多。這使用柔性盒系統。由於缺乏對視口的完全控制，在現代設計中不建議使用左浮動。

浮動左=舊的設計

Flexbox的=現代設計

body { 
 
    margin: 0px; 
 
    background: #f5f5f5; 
 
    font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    letter-spacing: .02em;} 
 

 
.r {position: relative;} 
 

 
.white { 
 
    background: white; 
 
    border-radius: 5px; 
 
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);} 
 

 
.container { 
 
    width: calc(100% - 40px); 
 
    display: flex; 
 
    padding: 20px; 
 
    max-width: 1000px; 
 
    margin: 0px auto; 
 
    text-align: center;} 
 

 
.box div { 
 
    padding-top: 150px; 
 
    font-size: 30px; 
 
    color: rgba(0, 0, 0, 0.1);} 
 

 

 

 

 

 

 

 
.side {width: 200px;height: 400px;} 
 
.left.side {margin: 100px 0px 0px 0px;} 
 
.right.side {margin: 100px 0px 0px 0px;} 
 

 
.center { 
 
    width: calc(100% - 400px); 
 
    height: 400px; 
 
    margin: 20px;} 
 

 

 

 

 

 

 

 
@media only screen and (max-width: 900px) { 
 
    .container {flex-flow: wrap;} 
 
    .side {width: calc(50% - 10px);} 
 
    .left.side {margin: 20px 20px 0px 0px;} 
 
    .right.side {margin: 20px 0px 0px 0px;} 
 
    .center { 
 
    width: 100%; 
 
    order: -1; 
 
    margin: 0px;}} 
 

 
@media only screen and (max-width: 400px) { 
 
    .container {flex-flow: wrap;} 
 
    .side {width: 100%;} 
 
    .left.side {margin: 20px 0 0 0;} 
 
    .right.side {margin: 20px 0 0 0;}}

<title>Resize</title> 
 

 

 
<body class=""> 
 
    <div class="r container"> 
 
    <div class="r white box left side"> 
 
     <div>Left</div> 
 
    </div> 
 
    <div class="r white box center"> 
 
     <div>Center</div> 
 
    </div> 
 
    <div class="r white box right side"> 
 
     <div>Right</div> 
 
    </div> 
 
    </div>

來源

2017-06-20 00:57:53

在沒有引導的情況下製作頁面的左側和右側

回答

相關問題