Question

我想在3列中看这些图像（见下文）。什么是HTML鳕鱼？

[图片] [图片] [图片]

<div class="rparticle ">
    <div class="articleEntry Normal"><a href="[LINK]">[IMAGE]</a></div>
    <div><a href="[LINK]">[TITLE]</a></div>
</div>

.rparticle 
{
 display:inline;
    clear: both;
    text-align: center;
    margin-bottom : 25px;
 width:190px;
}

Answer 1

让它们向右或向左浮动。

...
<head>
    <style>
        .rparticle{
           float: left;
           width: 33%;
           text-align: center;
           margin-bottom : 25px;
        }
        .clear{
           clear: both;
        }
    </style>
</head>
<body>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE1]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE2]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE3]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <br class="clear" />
</body>
...

Answer 2

仅当容器和孩子有width并且孩子float为left时，才有可能。这是一个复制'n'paste'n'runnable SSCCE来演示它。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2982423</title>
        <style>
            #container {
                width: 750px;
            }
            #container .image {
                float: left;
                width: 250px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
        </div>
    </body>
</html>

在列中列出DIV标记

2 个答案: