[英]How do I fix the css to have two columns on small screens?
我的網站有兩個部分，左邊的菜單和右邊的內容。 在小屏幕上，我需要菜單位於頂部，內容位於中間。
在一些問題之后，我能夠將內容放在大屏幕上的菜單旁邊，但是它已經完成了將它推到左側 - 這意味着在較小的窗口上它會做同樣的事情。
我已經嘗試過浮點數，將像素更改為％和更改像素，將浮動對齊左側和右側，清除浮動，更改它們的寬度和高度，以及將顯示更改為內聯塊和內聯。 （還有更多的東西，但我記不住了。）唯一有效的是左邊距：主要內容為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;
}
}
我希望的是：更大的窗口： 左側的導航菜單，右側的內容。 較小的窗口： 頂部的菜單，內容位於下方。
所以基本上，你需要實現的是將整個文檔包裝到一個div包裝器中。
這里我添加了一個id為#main的div元素。 並將主要內容包裝到類名為.content的div中。 結構看起來像這樣。
<div id="main">
<div class="menu">
<!-- other codes -->
</div>
<div class="content">
<!-- other codes -->
</div>
</div>
和根div的樣式
#main {
width: 100%;
height: 100vh; // take up the whole viewport height
overflow: hidden; // remove the scrollbar for overflow items
display: flex;
}
以及內容和菜單div的樣式
.content {
width: 75%;
height: 100%;
overflow-y: scroll; // add the vertical scroll bar for content
}
.menu {
display: fixed;
left: 0;
width: 25%;
height: 100vh;
}
這就是它的樣子。
* { box-sizing: border-box; } body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; width: 100%; margin: 0 auto; background-color:#47807E; background-image: url('Home_background.png'); background-position:top; background-repeat:repeat-x; text-align: center; } #main { width: 100%; height: 100vh; overflow: hidden; display: flex; } .menu { display: fixed; left: 0; width: 25%; height: 100vh; } .content { width: 75%; height: 100%; overflow-y: scroll; } .responsive { width:100%; height: auto; } ul{ width: 30%; border: 2px solid black; } /* formatting for content areas */ .header { padding:0; } .main { padding:0; } .footer { width: 30%; float: right; margin: 10px; text-align: center; } /* styling for font and images */ /* side navigation testing, need to fix formatting. */ .sidenav { list-style-type: none; margin: 0; padding: 0; float:left; width:25%; background-colour: #ccffff; position: fixed; height: 100%; overflow: auto; padding:0%; } .sidenav li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; background-color: #ccffff; } .sidenav li a.active { background-color: #003333; color:white; } .sidenav li a:hover:not(.active){ background-color:#003333; color: white; } @media screen and (max-width:800px) { #main { display: block; height: auto; } .menu { width: 100%; height: 80px; } .content { width: 100%; overflow-y: hidden; } .sidenav { width: 100%; position: relative; } .sidenav li { display: inline-block; } } @media screen and (max-width: 400px) { .sidenav li a{ text-align: center; float: none; } }
<div id="main"> <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.--> <div class="content"> <!--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> </div> </div>
我認為你已經為較小的設備完成了響應式任務，只需在@media screen and (max-width:900px)媒體查詢中添加以下css @media screen and (max-width:900px)進行小調整。
div.header,
div.main {
margin-left: 0;
width: 100%;
}
另外，還要確保你添加
viewport你的頁面元head如果不只是添加下面的代碼在你頁面head。 試試這個我希望它會幫助你。 謝謝
<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-->
Bootstrap：如何在帶有或不帶有媒體查詢的小屏幕上創建響應div列？
[英]Bootstrap : How do i create responsive div columns in the small screens with or without media queries?
Bootstrap：如何在小屏幕上的其他兩列之上堆疊兩列？
[英]Bootstrap: How to stack two columns on top of two other columns on small screens?
我正在嘗試為小屏幕提供一個響應式導航欄，如何更改指向CSS下拉菜單的左側鏈接？
[英]I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?
我有兩個不同的按鈕，但 CSS 將第二個 HTML 按鈕的 hover 顏色應用於第一個。 你如何解決這個問題？
[英]I have two different buttons, but the CSS applies the hover color of the second HTML button to the first. How do you fix this?
我可以在較小的屏幕上將引導列逐個轉到下一行嗎？
[英]Can I have bootstrap columns go to next row two by two on smaller screens?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.