Question

我正在设计一个html页面，我需要显示插入的图像。我希望以这种方式安排图像：

Image1 Image2 Image3    
Image4 Image5 Image6    
Image7 Image8 Image9

<html>
 <head>
  <title>Display Images</title>
 </head>
 <body>
  {% for image in images %}
    <div> 
      <img src={{ self.item_.images }}>
     </div>
  {% endfor %}
 </body>
<html>

之后的所有图像以相同的顺序排列。第一行有三个图像，然后自动断开，然后是下一行。

请帮忙。最诚挚的问候

Answer 1

只需将每张图像浮动...然后在每第三张图像后清除，以便将接下来的三张图像强制换行。

您可以使用CSS nth-child选择器，如下所述。这样就无需为每个图像和父容器设置特定的宽度。

Demo Fiddle

CSS

img{
    float:left;
}
img:nth-child(3n+1){
    clear:left;
}

Answer 2

这是你想要的吗？

DEMO

<强> HTML

<div class='container'>
    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>
</div>

<强> CSS

.container{
    display:block;
    width:400px;
    }

.container img{
    float:left;
    padding:1px;

}

Answer 3

       Image1 (fll) Image2 (fll) Image3 (fll)    
(clear)Image4 (fll) Image5 (fll) Image6 (fll)    
(clear)Image7 (fll) Image8 (fll) Image9 (fll)

其中：

fll   - float: left
clear - clear: both

Answer 4

您可以找到想法 here

然后我为你定制。

<!DOCTYPE html>
<html>
<head>
    <style>
    .container 
    {
        width:500px;
    }
    div.img
    {
        margin: 5px;
        padding: 5px;
        border: 1px solid #0000ff;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }   
    div.img img
    {
        display: inline;
        margin: 5px;
        border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    div.desc
    {
        text-align: center;
        font-weight: normal;
        width: 120px;
        margin: 5px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
</body>
</html>

Answer 5

您希望图片的尺寸固定吗？

如果不是：

<html>
<head>
<style>
    img {
        width: 33%;
        height: 100px;
        float: left;
    }
</style>
</head>
<body>
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</body>
</html>

如果是:(您可能需要考虑固定的容器宽度。）

<html>
<head>
<style>
    .main-container {
        width: 900px;
        margin: 0 auto;
    }

    img {
        width: 300px;
        height: 200px;
        float: left;
    }
</style>
</head>
<body>
    <div class="main-container">
        <img src=""><img src=""><img src="">
        <img src=""><img src=""><img src="">
        <img src=""><img src=""><img src="">
    </div>
</body>
</html>

浮动允许图像填充一行。修复了图像和容器，可以确定行中将有多少图像。

如果您想关注响应式设计，可以在页面中添加断点，以便在较小的屏幕尺寸中，图像网格取决于可用空间。

通常，您需要为图像设置固定尺寸，即实际尺寸。否则，图像的显示质量可能会很差。

垂直和水平对齐

5 个答案:

Demo Fiddle