gpt4 book ai didi

html - 将图像移动到新行

转载 作者:太空宇宙 更新时间:2023-11-04 12:44:57 25 4
gpt4 key购买 nike

这里是新手。

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

最佳答案

所以看起来评论打败了我,但你只需要将图像的宽度设置为 33.333%,这样浏览器就会在空间不足时自动开始换行。就我个人而言,我希望在图像周围有一些填充,所以我的像你这样的图像的 CSS 将是:

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

关于html - 将图像移动到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26583836/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com