function countSuccessPosts(rssFeeds) {
var index, itemIndex, feed, item, successCounter = 0;
for (index = 0; index < rssFeeds.length; index++) {
feed = rssFeeds[index];
for (itemIndex = 0; itemIndex < feed.itemsToPost.length; itemIndex++) {
item = feed.itemsToPost[itemIndex];
if(item.response && item.response.id) {
successCounter++;
}
}
}
return successCounter;
}
以上是我的代码,其中第1行有4个div,第2行有3个div。我试图让div响应。为此,代码中提到了<!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>
的css。渲染代码时,前四个div不是直线。另外,当我调整窗口大小时,布置会响应,但这4个div前面有空白区域。很乐意帮助我如何使它们响应并占据屏幕各个方面的屏幕。
答案 0 :(得分:2)
我认为你想要这样的东西,它可能对你有帮助。
.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;
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
简单的改进,希望能帮助你开始,并且你将改进这个例子:)
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background-image: url("page-bg.jpg");
font-size:80%;
max-width:1200px;
margin:0 auto;
}
h1, h2{
padding:5px;
}
.row1{
width:100%;
}
.one{
width:21%;
min-width:300px;
float:left;
padding:5px;
margin:0 auto;
}
.inside {
float: left;
padding:5px;
width:100%;
min-height:120px;
border: 1px solid red;
}
.row2{
width:100%;
clear:both;
}
.two{
width:33%;
min-width:400px;
float:left;
padding:5px;
margin:0 auto;
}
.city {
float: left;
padding: 15px;
width: 100%;
min-height: 300px;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Responsive</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Demo</h1>
<h2>Responsive page</h2>
<div class="row1">
<div class="one">
<div class="inside">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
</div>
<div class="one">
<div class="inside">
<h2>Paris</h2>
</div>
</div>
<div class="one">
<div class="inside">
<h2>Tokyo</h2>
</div>
</div>
<div class="one">
<div class="inside">
<h2>Istanbul</h2>
</div>
</div>
</div>
<div class="row2">
<div class="two">
<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 class="two">
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
</div>
<div class="two">
<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>