Question

新手在这里。

我正在尝试在3列* 4行布局中创建12个大小相同的图像页面。

我遇到每行之间出现不需要的空间的问题。我目前正在使用<br>，我知道这是不正确的，但我不知道正确的方法。据我了解，表格现在被认为是一种糟糕的方法吗？

我目前有CSS：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: black;
}

.centerDiv {
    width: 60%;
    height:200px;
    margin: 0 auto;
    background-color:#FFA500;
}

.pic {
    border-left: 0px solid black;
    border-right: 0px solid black;
    float: left;
    /*  height: 300px; */
    /*  width: 300px; */
    margin: 0px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 0px #111;
    box-shadow: 0px 0px 0px #111;
}

我的HTML：

<html>
    <head>
        <meta charset=utf-8 />
        <meta name="description" content="description">
        <title>JimithyH</title>
        <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </head>
    <body>
        <div class="tilt pic">
            <div class="imgContain">
                <img src="tree-0-0.jpg" alt="">
            </div>
        </div>
        <div class="tilt pic">
            <img src="tree-0-1.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-0-2.jpg" alt="">
        </div>
        <br clear="all">
        <div class="tilt pic">
            <img src="tree-1-0.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-1-1.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-1-2.jpg" alt="">
        </div>
        <br/ clear="all">
        <div class="tilt pic">
            <img src="tree-2-0.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-2-1.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-2-2.jpg" alt="">
        </div>
        <br clear="all">
        <div class="tilt pic">
            <img src="tree-3-0.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-3-1.jpg" alt="">
        </div>
        <div class="tilt pic">
            <img src="tree-3-2.jpg" alt="">
        </div>
    </body>
</html>

Answer 1

所以看起来评论打败了我，但你需要的只是将图像的宽度设置为33.333％，这样浏览器会在空间不足时自动启动换行符。就个人而言，我想在图像周围添加一些填充，这样我的CSS就像你的图像一样：

img {
   width: 30%;
   padding: 1%;
}

Answer 2

似乎缺少定义包含标记的标记的宽度。

你需要每三个人将身体宽度分成100％，因此每个人应该有33％（只是四舍五入）。

所以你可以在css中提到

#tilt pic
{
   width : 33%;
   margin-left : 2px; // as per your requirement
}

这肯定适合你。

将图像移动到新行

2 个答案: