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>

何か助けはありますか？

ありがとう！

4

3 に答える 3