0
div .box (5) 번 반복하려고합니다. (각 상자에서 똑같은 재료를 사용하면 내용이 변경 될 것입니다.) 모든 줄이 들여 쓰기가 더 많습니다. 다음보다. http://jsfiddle.net/infoed/DN8x4/1/ :목록에있는 모든 추가 항목이 추가 들여 쓰기와 함께 계단식으로 배열됩니다.
<DOCTYPE! html>
<html>
<head>
<title> Breaditt </title>
<style>
html, body {
font-family: sans-serif;
margin: 0;
padding: 0; }
#logobar {
background: rgb(206, 211, 255); }
#logobar ul {
list-style-type: none;
margin: 40;
padding: 40; }
#logobar li {
display: inline;
padding: 20;
font-size: 52;
font-family: Comic sans MS;}
.box {
margin-left: 50px;
width: 650px;
height: 80px;
display: inline-block; }
.box .headline {
font-size: 18px;
color: black;
list-style-type: none;
display: inline-block; }
.box .submitted {
display: inline-block; }
.box h {
display: inline-block; }
.box img {
float: left;
margin-right: 10px;
}
.box {
clear:both;
}
</style>
</head>
<body>
<div id="logobar">
<ul>
<li>Breaditt: Bread News Aggregator</li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="250" height="200"></li>
</ul>
</div>
<div id="breadnews">
<div class="box">
<img src="img/counter.jpg" alt=counter width="75" height="75" />
<img src="img/bread.jpg" alt=article-logo width="75" height="75" />
<div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div>
<div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div>
<div class="share"><h>14,400 Comments. Share Save hide report</h> </div>
<div id="breadnews">
<div class="box">
<img src="img/counter.jpg" alt=counter width="75" height="75" />
<img src="img/bread.jpg" alt=article-logo width="75" height="75" />
<div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div>
<div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div>
<div class="share"><h>14,400 Comments. Share Save hide report</h> </div>
<div id="breadnews">
<div class="box">
<img src="img/counter.jpg" alt=counter width="75" height="75" />
<img src="img/bread.jpg" alt=article-logo width="75" height="75" />
<div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div>
<div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div>
<div class="share"><h>14,400 Comments. Share Save hide report</h> </div>
<div id="breadnews">
<div class="box">
<img src="img/counter.jpg" alt=counter width="75" height="75" />
<img src="img/bread.jpg" alt=article-logo width="75" height="75" />
<div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div>
<div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div>
<div class="share"><h>14,400 Comments. Share Save hide report</h> </div>
<div id="breadnews">
<div class="box">
<img src="img/counter.jpg" alt=counter width="75" height="75" />
<img src="img/bread.jpg" alt=article-logo width="75" height="75" />
<div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div>
<div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div>
<div class="share"><h>14,400 Comments. Share Save hide report</h> </div>
</div>
</body>
</html>
어떤 도움도 여기에
내 코드에 대한 링크입니까?감사합니다.
좋아, 내가 DOCTYPE을 고정! 다음에 CSS 상자에 CSS 스타일을 넣을 것입니다. 그 서비스를 처음 사용합니다. 도와 주셔서 감사합니다. 나는 각 div를 닫았으며 올바르게 나열했다. – user2105276
ID가 유일하지 않아야합니다. 나는 id = "breadnews"가 각 항목이 "뉴스 박스"라는 사실을 언급했다고 생각했습니다. – user2105276
"ID"는 "신원"에서 유래 한 "신분증"을 나타내며, 이는 하나를 의미합니다. 아마 당신은'class = "breadnews"(CSS의'.breadnews')를 대신 사용하여 하나 이상의 요소가있을 수있는 요소 유형을 정의하려고합니다. –