我不知道如何在其附近放置带有文本的图像，它会是响应式文本和图像。
从这个例子中可以看出，页脚位于图像的中间。所以我的主要问题是如何将图像和文本放在它附近(它们都是响应式的)，然后我可以在下面写一些东西；例如，纯文本或放置页脚(没有固定位置)。我只是一个初学者，请不要生气。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZC..."
crossorigin="anonymous">
<link rel="stylesheet" href="reduit.css">
<title>Hello, world!</title>
</head>
<body>
<header id="main-header">
<h1>Welcome to the Reduit beach website</h1>
</header>
<div class="left-half">
</div>
<div class="right-half">
<article>
<p>The world is full of beaches, but they are not all alike. In Amazing Beaches, students will read about beautiful beaches that have special features, such as pink sand or a shore covered in smooth glass pebbles. Gorgeous photographs illustrate the information in the text, and simple world maps show the location of each highlighted beach. Each small section is only one page long, and the sentence complexity is adjusted for emergent readers.</p>
<a href="#" class="btn btn-primary" role="button">Read more</a>
</article>
</div>
<div class="footer">
<p>Footer</p>
</div>
<footer class="mainfooter">
<p>foo</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
body {
font-size:18px;
}
CSS
#main-header {
background-color: coral;
color: #fff;
text-align: center;
padding-top: 20px;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
}
/* .footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(43, 40, 40);
color: white;
text-align: center;
margin-top:20px;
} */
#mainfooter {
background: #333;
color: #fff;
text-align: center;
padding:20px;
margin-top:40px;
}
.left-half {
background:url('https://cdn.newsapi.com.au/image/v1/9fdbf585d17c95f7a31ccacdb6466af9') no-repeat;
position: absolute;
left: 0px;
width: 50%;
height: 60%;;
background-size:cover;
}
.right-half {
background-color: coral;
position: absolute;
right: 0px;
width: 50%;
height: 60%;
text-align: center;
}
最佳答案
试试这个
body {
font-size:18px;
}
#main-header {
background-color: coral;
color: #fff;
text-align: center;
padding-top: 20px;
}
article {
width: 100%;
padding: 20px;
}
/* .footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(43, 40, 40);
color: white;
text-align: center;
margin-top:20px;
} */
#mainfooter {
background: #333;
color: #fff;
text-align: center;
padding:20px;
margin-top:40px;
}
.left-half {
background:url('https://cdn.newsapi.com.au/image/v1/9fdbf585d17c95f7a31ccacdb6466af9') no-repeat;
width: 50%;
height: 60%;
float: left;
background-size:cover;
}
.right-half {
background-color: coral;
float: right;
overflow: hidden;
width: 50%;
height: 60%;
text-align: center;
}
@media(max-width:470px){
.right-half{
width: 100%;
}
.left-half {
width: 100%;
}
} <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="reduit.css">
<title>Hello, world!</title>
</head>
<body>
<header id="main-header">
<h1>Welcome to the Reduit beach website</h1>
</header>
<div style="display: block;">
<div class="left-half">
</div>
<div class="right-half">
<article>
<p>The world is full of beaches, but they are not all alike. In Amazing Beaches, students will read about beautiful beaches that have special features, such as pink sand or a shore covered in smooth glass pebbles. Gorgeous photographs illustrate the information in the text, and simple world maps show the location of each highlighted beach. Each small section is only one page long, and the sentence complexity is adjusted for emergent readers.</p>
<a href="#" class="btn btn-primary" role="button">Read more</a>
</article>
</div>
</div>
<div style="clear: both"></div>
<footer class="mainfooter" style="padding: 200px;">
<p>foo</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
关于javascript - 图像和文本对齐、页脚和文本问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50668832/