移动图像到新线

我想在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>

来源

2014-10-27 Richard Bates

都是你的图像宽度/高度相等？ – fcalderan 2014-10-27 08:52:04

对于这个页面，是的，它们是方形的。 – 2014-10-27 08:54:17

前几天有类似的问题：http://stackoverflow.com/questions/26381961而我的解决方案可以在http://jsfiddle.net/8tfs4yam/看到它甚至是响应。 ;） – Paul 2014-10-27 08:55:22

所以它看起来像评论打我，但你需要的是一个图像的宽度设置为33.333％，这样浏览器将在空间不足时自动启动换行。我个人希望有图像周围一些填充，所以我对于像你这样的图像CSS将是：

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

来源

2014-10-27 09:05:05

好像你缺少定义包围标签的标签的宽度。

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

这样你就可以在CSS中提到的

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

这必将为你的作品。

来源

2014-10-27 10:15:29

移动图像到新线

回答

相关问题