我之前问了一个关于同一个项目的问题，但这是我遇到的另一个问题。
我应该使用三种不同的媒体查询来根据用于查看它的屏幕大小来更改页面布局（我通过调整浏览器窗口来测试它）。这三个查询的工作方式如下：
Screen Size <400:
Background 1
Bulleted lists should be vertical.
Bulleted lists should be below the two columns.
The Road to Enlightenment section should be on top of the Make it Good section.
Screen Size >=400 and <500:
Background 2
Bulleted lists should be horizontal.
Bulleted lists should be to the right of the two columns.
The Road to Enlightenment sections should be to the left of the Make it Good section.
Screen Size <500:
Same basic concept as the previous query, but with background 3.
一切都工作得很好，只要大小达到400时让列并排出现。我的意思是当我将窗口拖过来时，背景会正确变化，而且所有内容都会变化并排出现，直到屏幕离它最窄点大约一半并且最大化（我真的希望这是有意义的）。
这是我的CSS：
@media (max-width: 399px) {
body {
background-color: purple;
border: 10px double black;
padding: 1%;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-image: url("sfalogo2.jpg");
background-repeat: no-repeat;
background-position: center;
color: black;
width: auto;
border: 10px double white;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
#good-id {
background-image: url("scaled_sfalogo2.jpg");
background-repeat: no-repeat;
background-position: center;
color: black;
width: auto;
border: 10px double white;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
clear: both;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
}
@media (max-width: 499px) and (min-width: 400px) {
body {
background-color: white;
border: 10px double black;
padding: 1%;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-image: url("sfalogo3.jpg");
width: auto;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
padding: 1.5%;
width: auto;
}
#good-id {
color: black;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
padding: 1.5%;
width: auto;
background-image: url("sfalogo3.jpg");
background-repeat: no-repeat;
background-position: center;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
clear: both;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
}
@media (min-width: 500px) {
body {
background-image: url("sfa_logo1.jpg");
color: black;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-color: white;
color: purple;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
width: 400px;
padding: 1.5%;
}
#good-id {
background-color: white;
color: purple;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
width: 400px;
padding: 0.5%;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
float: right;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
float: right;
}
}
这是我的HTML，虽然这个项目的说明实际上并没有让我改变html，但我只能使用CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS 351 - Project 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="css-zen-garden">
<section class="intro-start" id="start-intro-id">
<header role="bannerRocks">
<h1>CS 351 Rocks</h1>
<h2>351 is a really great thing!</h2>
</header>
<div class="summaryDivision" id="zen-summary" role="article">
<p>There are many ways that it is great.<a href="/examples/style.css" title="This page's sample CSS, the file you may modify."></a></p>
</div>
<div class="start" id="start-id" role="article">
<h3>The Road to Enlightenment</h3>
<p>To be, or not to be: that is the question". - (Act III, Scene I).</p>
<p>"Neither a borrower nor a lender be; For loan oft loses both itself and friend, and borrowing dulls the edge of husbandry". - (Act I, Scene III).</p>
<p>"This above all: to thine own self be true". - (Act I, Scene III).</p>
<p>"Though this be madness, yet there is method in 't.". - (Act II, Scene II). </p>
<p>"That it should come to this!". - (Act I, Scene II). </p>
<p>"There is nothing either good or bad, but thinking makes it so". - (Act II, Scene II). </p>
<p>"What a piece of work is man! how noble in reason! how infinite in faculty! in form and moving how express and admirable! in action how like an angel! in apprehension how like a god! the beauty of the world, the paragon of animals! ". - (Act II, Scene II).</p>
<p>"The lady doth protest too much, methinks". - (Act III, Scene II). </p>
<p>"In my mind's eye". - (Act I, Scene II).</p>
<p>"A little more than kin, and less than kind". - (Act I, Scene II).</p>
<p>"The play 's the thing wherein I'll catch the conscience of the king". - (Act II, Scene II). </p>
<p>"And it must follow, as the night the day, thou canst not then be false to any man". - (Act I, Scene III)."This is the very ecstasy of love". - (Act II, Scene I).</p>
<p>"Brevity is the soul of wit". - (Act II, Scene II).</p>
<p>"Doubt that the sun doth move, doubt truth to be a liar, but never doubt I love". - (Act II, Scene II).</p>
<p>"Rich gifts wax poor when givers prove unkind". - (Act III, Scene I).</p>
<p>"Do you think I am easier to be played on than a pipe?" - (Act III, Scene II).</p>
<p>"I will speak daggers to her, but use none". - (Act III, Scene II).</p>
<p>"When sorrows come, they come not single spies, but in battalions". - (Act IV, Scene V).</p>
</div>
</section>
<div class="bad inbetween" id="good-supporting" role="main">
<div class="good" id="good-id" role="article">
<h3>Make it good.</h3>
<p>"Now is the winter of our discontent". - (Act I, Scene I). </p>
<p>"A horse! a horse! my kingdom for a horse!". - (Act V, Scene IV). </p>
<p>"Conscience is but a word that cowards use, devised at first to keep the strong in awe". - (Act V, Scene III).</p>
<p>"So wise so young, they say, do never live long". - (Act III, Scene I). </p>
<p>"Off with his head!" - (Act III, Scene IV). </p>
<p>"An honest tale speeds best, being plainly told". - (Act IV, Scene IV). </p>
<p>"The king's name is a tower of strength". - (Act V, Scene III). </p>
<p>"The world is grown so bad, that wrens make prey where eagles dare not perch". - (Act I, Scene III).</p>
</div>
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="occasion">On the occasion...:</h3>
<nav role="navigation">
<ul>
<li>
<a href="http://cnn.com" class="design-name">Caesar</a></li>
<li><a href="http://sfasu.edu">SFA</a></li>
<li><a href="http://cosm.sfasu.edu">COSM</a>
</li>
</ul>
</nav>
</div>
<div class="zen-resources" id="zen-resources">
<h3 class="animals">Resources:</h3>
<ul>
<li class="view-css">
Cats</li>
<li class="view-css">Dogs</li>
<li class="view-css">Elephants</li>
<li class="view-css">Rhinos<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page."></a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<!--
These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
These days we have full ::before and ::after support, favour using those instead.
These only remain for historical design compatibility. They might go away one day.
-->
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>
</body>
</html>
答案 0 :(得分：0)
您可以使用column-count和column-gap css属性为每个媒体查询下的内容维护适当的列。
.div {
column-count: 3;
column-gap: 10px;
}
这会将类.div中的任何内容放入3列中，每列间隔10px。