我需要你的帮助。我在文本下有一个图像，当浏览器重新调整大小时，此图像不在文本下方，在右侧。希望有人能帮助我弄清楚我做错了什么。 HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Alco - Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/alcotemplate.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Montserrat:400,700","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">
<link rel="apple-touch-icon" href="images/webclip-slate.png">
</head>
<body>
<header class="navbar">
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-4 w-clearfix">
<img class="logo" src="images/logo.png" alt="53a187e6c2e6cb0d0ecbc4a3_logo.png">
</div>
<div class="w-col w-col-8 nav-column"><a class="nav-link" href="#">Home</a><a class="nav-link" href="#page-nav-share">About</a><a class="nav-link" href="#">Portfolio</a><a class="nav-link" href="#">Blog</a><a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</header>
<section class="w-container">
<h4>Blog</h4>
<img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget quam orci.</p>
</section>
<div class="w-container container">
<div class="blog">
<div class="border">
<img class="scale-with-grid" src="images/blogpost.png" />
<h5><a href="blog-post.html">Neque porro quisquam est qui lorem ipsum.</a></h5>
<h3>Our Team</h3>
<img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
<p>At vero eos et accusamus et iusto</p>
</div>
<div class="section grey footer"></div>
<img src="images/footer.png" alt="53a425b2eaa4a69a21bd719e_footer.png">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>
CSS
body {
background-image: url('../images/bg_black.png');
font-family: Montserrat, sans-serif;
color: #333;
font-size: 12px;
line-height: 20px;
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
h1 {
display: block;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 38px;
line-height: 44px;
font-weight: 700;
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-family: Montserrat, sans-serif;
color: #745785;
font-size: 32px;
line-height: 36px;
font-weight: 400;
}
h3 {
display: block;
margin: 25px auto 10px;
padding-top: 0px;
font-family: Lato, sans-serif;
color: #858181;
font-size: 15px;
line-height: 30px;
font-weight: 300;
}
h4 {
margin: 47px 0px 10px;
font-family: Lato, sans-serif;
color: #828181;
font-size: 25px;
line-height: 24px;
font-weight: 300;
}
h5 {
margin: 10px 0px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
h6 {
margin: 10px 0px;
font-size: 12px;
line-height: 18px;
font-weight: 700;
}
p {
position: relative;
display: block;
margin: 17px auto 55px;
padding-top: 16px;
padding-right: 0px;
padding-bottom: 0px;
float: none;
clear: none;
font-family: Lato, sans-serif;
color: #858181;
font-size: 12px;
line-height: 18px;
font-weight: 300;
text-align: center;
text-decoration: none;
}
.section {
padding-top: 65px;
padding-bottom: 65px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.section.grey {
background-color: #f5f6f7;
}
.section.grey.footer {
margin-top: 111px;
padding-top: 49px;
padding-bottom: 49px;
border-bottom-style: none;
background-image: url('../images/bg_black.png');
text-align: center;
}
.nav-link {
display: inline-block;
margin-right: 12px;
margin-left: 12px;
border-bottom: 1px solid transparent;
opacity: 1;
-webkit-transition: border 300ms ease;
-o-transition: border 300ms ease;
transition: border 300ms ease;
font-family: Lato, sans-serif;
color: #7a7a7a;
font-size: 14px;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
}
.nav-link:hover {
border-bottom-color: #5169fc;
}
.nav-column {
font-weight: 300;
text-align: right;
}
.logo-in-footer {
display: block;
margin-top: 22px;
margin-right: auto;
margin-left: auto;
text-shadow: black 0px 0px 0px;
}
.social-button {
width: 36px;
height: 36px;
margin-right: 5px;
margin-left: 5px;
padding-top: 7px;
border-radius: 60px;
background-color: #745785;
-webkit-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
transition: background-color 300ms ease;
}
.social-button:hover {
background-color: #f02e4e;
}
.footer-text {
display: inline;
}
.navbar {
padding-top: 39px;
padding-bottom: 39px;
background-image: url('../images/bg_black.png');
}
.text-link {
text-decoration: none;
}
.text-link:hover {
text-decoration: none;
}
.button-block {
margin-top: 17px;
}
.logo {
margin-right: 12px;
float: left;
}
.slider {
width: auto;
height: 500px;
margin-top: 0px;
float: none;
}
.slider.slide-1 {
background-image: url('../images/picjumbo.com_IMG_7609%20(1).jpg');
background-position: 0% 53%;
background-size: cover;
}
.image {
display: block;
margin: 32px 0px 0px 464px;
padding-left: 0px;
float: none;
opacity: 1;
}
.container {
margin-top: 60px;
}
.slide-1 {
opacity: 0.5;
}
.row {
margin-top: 75px;
}
.text-block {
margin-top: 27px;
margin-left: 19px;
font-family: Lato, sans-serif;
color: #b7b5b5;
font-size: 12px;
line-height: 18px;
font-weight: 300;
}
.imagefooter {
margin-top: 145px;
margin-bottom: 35px;
}
.image-slider {
opacity: 0.5;
}
.imagefooter1 {
margin-top: 11px;
margin-left: 244px;
}
.category {
margin-top: 52px;
margin-left: 317px;
}
.imageportfolio {
margin-top: 75px;
margin-left: 66px;
}
@media (max-width: 991px) {
p {
font-size: 14px;
line-height: 21px;
}
}
@media (max-width: 767px) {
h2 {
margin-top: 0px;
}
.section {
padding-top: 33px;
padding-bottom: 33px;
text-align: center;
}
.nav-column {
padding-top: 22px;
text-align: center;
}
.navbar {
padding-top: 24px;
padding-bottom: 24px;
text-align: center;
}
.logo {
display: inline-block;
margin-top: -6px;
float: none;
}
}
@media (max-width: 479px) {
h3 {
font-size: 18px;
line-height: 23px;
}
.section {
text-align: center;
}
.section.white {
padding-top: 0px;
padding-bottom: 0px;
}
}
如果你能帮助我，我们将不胜感激。 期待收到你的来信。