<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Responsive</title>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 100%;
height: 300px;
border: 1px solid black;
}
.city2 {
float: left;
margin: 5px;
padding: 15px;
width: 100%;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body background="page-bg.jpg">
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div style="width:100%">
<div style="width:21%;" >
<div class="city2">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
</div>
<div style="width:21%;float:left;">
<div class="city2">
<h2>Paris</h2>
</div>
</div>
<div style="width:21%;">
<div class="city2">
<h2>Tokyo</h2>
</div>
</div>
<div style="width:21%;">
<div class="city2">
<h2>Istanbul</h2>
</div>
</div>
</div>
<div style="width:100%">
<div style="width:33.3%">
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
</div>
<div style="width:33.3%">
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
</div>
<div style="width:33.3%">
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
上面是我的代码，第 1 行有 4 个 div，第 2 行有 3 个 div。我试图让 div 响应。为此，代码中将 css 称为 city,city2。呈现代码时，前四个 div 不会排成一条直线。另外，当我调整窗口大小时，排列是响应式的，但那 4 个 div 前面有空白。请帮助我如何让它们响应并在屏幕的每个维度占据屏幕。
最佳答案
我想你想要这样的东西，希望它能帮助你。
.city {
float: left;
margin: 5px;
padding: 15px;
width: 100%;
height: 300px;
border: 1px solid black;
box-sizing:border-box;
}
.city2 {
float: left;
margin: 5px;
padding: 15px;
width: 100%;
min-height: 120px;
border: 1px solid red;
box-sizing:border-box;
} <h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div >
<div style="width:21%;float:left;margin-right: 10px;">
<div class="city2">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
</div>
<div style="width:21%;float:left;margin-right: 10px;">
<div class="city2">
<h2>Paris</h2>
<p>London is the capital city of England.</p>
</div>
</div>
<div style="width:21%;float:left;margin-right: 10px;">
<div class="city2">
<h2>Tokyo</h2>
<p>London is the capital city of England.</p>
</div>
</div>
<div style="width:21%;float:left;margin-right: 10px;">
<div class="city2">
<h2>Istanbul</h2>
<p>London is the capital city of England.</p>
</div>
</div>
</div>
<div>
<div style="width:32%;float:left;margin-right:8px">
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
</div>
<div style="width:32%;float:left;margin-right:8px">
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
</div>
<div style="width:32%;float:left;">
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>关于html - div的格式(响应式)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30881981/