html - 如何修复 css 在小屏幕上有两列？

我的网站有两个部分，左边是菜单，右边是内容。在小屏幕上，我需要菜单位于顶部，内容位于中间。

在一些问题之后，我能够将内容放在大屏幕上的菜单旁边，但它已将其推到左侧 - 这意味着在较小的窗口上它也是如此。

我已经尝试过 float 、将像素与 % 进行更改、将 float 向左和向右对齐、清除 float 、更改它们的宽度和高度，以及将显示更改为内联 block 和内联。 (还有很多，想不起来了。) 唯一几乎可行的是主要内容的 margin-left:30%。

我的问题: 我需要更改什么代码才能让内容在大屏幕上位于菜单旁边，而在小屏幕上位于菜单下方 - 而不会被推到一侧？

(我删除了内容，所以它只显示基本形式的布局。)

<link rel="stylesheet" href="test_css.css">
</head>

<body>
<!--menu below-->
<div class="menu">  
 <ul class="sidenav">
     <li><h3>menu:</h3></li>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
 </ul>
</div>
<!--End of the menu.-->

<!--header-->
<div class="header">
 <br />
 <h1>Header</h1>
     <a></a>
 <p class="hr">____________________________________</p>
</div>
<!--end of header section-->

<div class="main">
 <h2>Main content</h2>
 <h2>Main content</h2>
 <a></a>
 <p class="hr">____________________________________</p>

 <h1>Main content</h1>
 <h2>Main content</h2>
 <h2>Main content</h2>
 <p class="hr">____________________________________</p>
</div>

<!--footer content below-->
<div id="footer">
 <h4>Staff:</h4>
 <h5>1</h5>
 <h5>2</h5>
 <h5>3</h5>
 <h6>Last updated: --/--/----</h6>
</div>
<!--end of footer content-->
</body>

还有CSS:

/* background and font face for web page-!important! */
body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 90%;
    margin: 0 auto;
    background-color:#47807E;
    background-image: url('Home_background.png');
    background-position:top;
    background-repeat:repeat-x;
    text-align: center;
}

.responsive {

    width:100%;
    height: auto;
}

ul{
    width: 30%;
    border: 2px solid black;
}

/* formatting for content areas */
div.header {
    margin-left: 30%;
    width: 63%;
    padding:0;
}

div.main {
    margin-left:30%;
    width: 63%;
    padding:0;
}

div.footer {
width: 30%;
float: right;
margin: 10px;
text-align: center;
}


/* styling for font and images */




/* side navigation testing, need to fix formatting. */
ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:25%;
    background-colour: #ccffff;
    position: fixed;
    height: 100%;
    overflow: auto;
    padding:0%;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #ccffff;
}

ul.sidenav li a.active {
    background-color: #003333;
    color:white;
}

ul.sidenav li a:hover:not(.active){
    background-color:#003333;
    color: white;
}

@media screen and (max-width:900px) {
ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    }   
}

ul.sidenav li a {
    float: inline-block;
    padding: 10px;
}

div.content {margin-left: 0;}

@media screen and (max-width: 400px) {
ul.sidenav li a{
    text-align: center;
    float: none;
    }
}

我所希望的: 较大的窗口:导航菜单在左侧，内容在右侧。 较小的窗口:菜单在顶部，内容在下方居中。

最佳答案

我认为您已经为较小的设备完成了响应任务，只需在 @media screen and (max-width:900px) media query 中添加 css 以进行小的调整。

div.header,
div.main {
  margin-left: 0;
  width: 100%;
}

Also make sure you add viewport meta in your page head if not just add below code in you page head. Try this i hope it'll help you out. Thanks

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

/* background and font face for web page-!important! */
body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 90%;
    margin: 0 auto;
    background-color:#47807E;
    background-image: url('Home_background.png');
    background-position:top;
    background-repeat:repeat-x;
    text-align: center;
}

.responsive {

    width:100%;
    height: auto;
}

ul{
    width: 30%;
    border: 2px solid black;
}

/* formatting for content areas */
div.header {
    margin-left: 30%;
    width: 63%;
    padding:0;
}

div.main {
    margin-left:30%;
    width: 63%;
    padding:0;
}

div.footer {
width: 30%;
float: right;
margin: 10px;
text-align: center;
}


/* styling for font and images */




/* side navigation testing, need to fix formatting. */
ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:25%;
    background-colour: #ccffff;
    position: fixed;
    height: 100%;
    overflow: auto;
    padding:0%;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #ccffff;
}

ul.sidenav li a.active {
    background-color: #003333;
    color:white;
}

ul.sidenav li a:hover:not(.active){
    background-color:#003333;
    color: white;
}

@media screen and (max-width:900px) {
ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    }   
    div.header,
    div.main {
      margin-left: 0;
      width: 100%;
    }
}

ul.sidenav li a {
    float: inline-block;
    padding: 10px;
}

div.content {margin-left: 0;}

@media screen and (max-width: 400px) {
ul.sidenav li a{
    text-align: center;
    float: none;
    }
}

<!--menu below-->
<div class="menu">  
 <ul class="sidenav">
     <li><h3>menu:</h3></li>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
 </ul>
</div>
<!--End of the menu.-->

<!--header-->
<div class="header">
 <br />
 <h1>Header</h1>
     <a></a>
 <p class="hr">____________________________________</p>
</div>
<!--end of header section-->

<div class="main">
 <h2>Main content</h2>
 <h2>Main content</h2>
 <a></a>
 <p class="hr">____________________________________</p>

 <h1>Main content</h1>
 <h2>Main content</h2>
 <h2>Main content</h2>
 <p class="hr">____________________________________</p>
</div>

<!--footer content below-->
<div id="footer">
 <h4>Staff:</h4>
 <h5>1</h5>
 <h5>2</h5>
 <h5>3</h5>
 <h6>Last updated: --/--/----</h6>
</div>
<!--end of footer content-->

关于html - 如何修复 css 在小屏幕上有两列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55559335/

html - 如何修复 css 在小屏幕上有两列？

上一篇：html - 需要基本的 HTML 帮助

下一篇：html - 了解 CSS 选择器优先级/特异性