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>
Любая помощь?
Спасибо!
Ok, я установил DOCTYPE! и в следующий раз поместит css-стили в поле css. Я впервые использую эту услугу. Спасибо за помощь. Я закрыл каждый div, и он правильно списывается. – user2105276
Я не был награжден удостоверением личности, должен быть уникальным. Я думал, что id = "breadnews" относится к тому, что каждый элемент - это «новостной бокс», нет? – user2105276
«ИД» означает «идентификация», которая проистекает из «личности», что означает ОДИН. Возможно, вы намеревались использовать 'class =" breadnews "' (и '.breadnews' в CSS) вместо этого, чтобы определить тип элемента, может быть более одного. –