0
我有兩個不同的部分，它們具有完全相同的CSS代碼，但是如果您查看下面的圖像，您可以在寬度上看到屏幕設置爲，圖像全部已經移動到一個新的行（這是我想要的），但下面的類別仍然在同一行，並得到更多「壓扁」在一起。我該如何做到這一點，以便類別像圖片一樣移動到一條新線上？提前致謝。圖像移動到下一行但文本不是
的問題圖片 - http://i.imgur.com/u6GnTa1.png
HTML：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 class="sectionhead">Best Selling Books</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
<h3 class="secfooter">Mere Bestsellers <span style="color: #ed786a;"><strong>Here</strong></span></h3>
</div>
</div>
<div id="sectionthree">
<div id="containerthree">
<h2 class="sectionhead">Popular Categories</h2>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.sectionhead{
margin: 2em 0 2em 0;
color: #888888;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
#sectionthree {
width: 80%;
top: 0;
right: 0;
}
#containerthree {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.secfooter{
color: #888888;
letter-spacing: 2px;
font-size: 0.85em;
}
.categories{
max-width: 100%;
width: 20%;
padding: 0 1em 0 1em;
display: inline-block;
}
這將類別一個放在另一個下面，我只希望發生一個屏幕的大小正在減少。所以我的意思是當你縮小窗口的大小時，它們會一個接一個地減少。 – SavageSpud
此外媒體查詢不適合我...... – SavageSpud
它的工作原理，http://codepen.io/anon/pen/xGxOdJ我剛剛設置爲568px的媒體查詢。如果你需要，你可以增加它。 – jerrylow