Question

我正在尝试重复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>

任何帮助？

谢谢！

Answer 1

您反复打开<div id="breadnews">和<div class="box">，但您永远不会关闭。

首先，ID必须是唯一的，因此您可能不打算复制粘贴<div id="breadnews">行。之后，只需在每个区块之后添加</div>，您应该做得很好。

另外，请正确使用JSFiddle 。当有完全可用的CSS和JS框时，不要将所有内容都推到HTML框中。最后，它是<!DOCTYPE html>，而不是<doctype! html>。

Answer 2

所有Kolink的观点都是正确的。这是一个更新的小提琴：

http://jsfiddle.net/DN8x4/4/

    <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>

        <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>

        <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>

        <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>

        <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）。

Answer 3

您的<div class="box">未关闭。请参阅：

http://jsfiddle.net/DN8x4/5/

列表中的每个附加项目都是级联的附加缩进

3 个答案: