在我网站的底部，我有 3 个要排列的 div。它们位于容器 div 中，并且仅在调整屏幕大小时排列。任何人都可以提供解决方案吗？这是我试过的 Css 和 HTML 代码。错误发生在 .info1 任何帮助将不胜感激!
body{
height: 100%;
background-color: lightskyblue;
margin-left: 0%;
margin-right: 0%;
padding: 0%;
}
header img{
display: block;
margin: 0 auto;
width: 90%;
}
header h1{
text-align: center;
margin-left: 5%;
margin-right: 5%;
}
nav ul {
list-style-type: none;
margin: 0%;
padding: 0%;
}
nav li{
float: left;
margin-left: 13.5%;
padding-top: 1%;
padding-bottom: 2%;
}
li a {
text-decoration: none;
}
h1{
text-align: center;
}
.container{
height: 30%;
width: 80%;
margin-top: 2%;
margin-left: 10%;
padding: 1%;
margin-bottom: 3%;
}
.contxt{
width: 55%;
height: atuo;
color: black;
font-size: 1.2em;
}
.container img{
float:right;
width: 60%;
margin-left: 3%;
margin-bottom: 3%;
}
.condiv{
height: 600px;
width: 80%;
margin: 0 auto;
}
.info1{
display: inline-block;
height: auto;
width: 27%;
padding-left: 1%;
padding-right: 1%;
text-align: center;
float: left;
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info1 img{
width:50%;
}
.info2{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info2 img{
width:50%;
}
.info3{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info3 img{
width:50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="pch.css">
<title>Premier Choice Holidays</title>
</head>
<body>
<header>
<img src="logo.png" style="width:100%;" alt="png image of logo">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">View Holidays</a></li>
<li><a href="index.html">Admin</a></li>
<li><a href="index.html">Credits</a></li>
<li><a href="wireframe.pdf">Wire Frames</a></li>
</ul>
</nav>
<img src="banner.png" alt="Image of suitecase on a world map" />
</header>
</body>
<main>
<h1>Welcome To Premier Choice Holidays</h1>
<div class="container">
<img src="safe-travel1.png" alt="Image of suite case.">
<div class="contxt">
<p>Welcome to Premier Choice Holidays! Its a great thing you found us! Now you can save £££ on expensive dream holidays! We are currently the most used and cheapest business used for finding great holiday deals. No matter what time of year it is we have a deal for you, even if its just for the weekend! We will make sure you have the holiday you have always dreamt of! All you need to do to start comparing prices is sign up to our website. We will also email you with deals we think you may like and hot offers that are on at the time!<br><br>If you need to get in touch with us please do not hesitate to do so, you can reach our email at pch@pchinfo.com, or ring us on #07898675398 </p>
</div>
</div>
<div class="largebox">
<div class="condiv">
<div class="info1">
<h3>Most Popular</h3>
<img src="america.png" alt=" American Flag.">
<p>Fly away to amreica in our most popular holiday deal ever!
For just £1000 you could be off to America with 2 people of your choice for a week of hot sun, parties, pools and so much more!</p>
<div class="img1">
<img src="4£.png" alt="img of ££££">
</div>
</div>
<div class="info2">
<h3>Fancy A Cruise?</h3>
<img src="cruise.png" alt="PNG image of a cruise ship.">
<p><br>We offer the best deals on Cruise holidays meaning you could save a fortune and be off on the holiday of a life time! Now for only £2000 sail away on an all inclusive party cruise packed with entertainment and 3 on board night clubs!</p>
<img src="4£.png" alt="image of ££££">
</div>
<div class="info3">
<h3>Just a Short One?</h3>
<img src="short.png" alt="image of suit case">
<p>Fancy a weekend away? Well what would you know we have deals for that too! Check out our weekend away to Amsterdam for only £300! Price includes Ferry, 3 nights hotel stay with food all paid for! </p>
<img src="three-pounds.png" alt="image of £££">
</div>
</div>
</main>
<div class="footer">
<p>Thank You! For visiting Premier Choice Holidays! Your #1 holiday providers!</p>
</div>
</body>
</html>最佳答案
在你的 condiv 上使用 display:flex。
此外，您可以设置 min-height/max-height 来控制尺寸，不要有太多的空白或溢出。您还可以针对不同的屏幕分辨率使用媒体查询。
@media only screen and (min-device-width: 600px){
.condiv {
font-size: 12px;
min-height: 500px !important;
}
}
body{
height: 100%;
background-color: lightskyblue;
margin-left: 0%;
margin-right: 0%;
padding: 0%;
}
.condiv{
min-height: 600px;
width: 80%;
margin: 0 auto;
display:flex
}
.info1{
display: inline-block;
height: auto;
width: 27%;
padding-left: 1%;
padding-right: 1%;
text-align: center;
float: left;
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info1 img{
width:50%;
}
.info2{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info2 img{
width:50%;
}
.info3{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info3 img{
width:50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="pch.css">
<title>Premier Choice Holidays</title>
</head>
<body>
</body>
<main>
<div class="condiv">
<div class="info1">
<h3>Most Popular</h3>
<img src="america.png" alt=" American Flag.">
<p>Fly away to amreica in our most popular holiday deal ever!
For just £1000 you could be off to America with 2 people of your choice for a week of hot sun, parties, pools and so much more!</p>
<div class="img1">
<img src="4£.png" alt="img of ££££">
</div>
</div>
<div class="info2">
<h3>Fancy A Cruise?</h3>
<img src="cruise.png" alt="PNG image of a cruise ship.">
<p><br>We offer the best deals on Cruise holidays meaning you could save a fortune and be off on the holiday of a life time! Now for only £2000 sail away on an all inclusive party cruise packed with entertainment and 3 on board night clubs!</p>
<img src="4£.png" alt="image of ££££">
</div>
<div class="info3">
<h3>Just a Short One?</h3>
<img src="short.png" alt="image of suit case">
<p>Fancy a weekend away? Well what would you know we have deals for that too! Check out our weekend away to Amsterdam for only £300! Price includes Ferry, 3 nights hotel stay with food all paid for! </p>
<img src="three-pounds.png" alt="image of £££">
</div>
</div>
</main>
</body>
</html>关于html - 除了调整屏幕大小时，Div 不会与容器中的其他人对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47528025/