内联块div仍然移动到下一行

时间:2016-05-15 23:42:07

标签: html css

我有display: inline-block属性的图像块,但是当有可用空间时,它们仍然会换行到下一行。我想要它所以它就像一张图像表。

HTML:

<div id="container" style="margin-left:2.5%;width:62.8%;margin-top:7%">
  <div id="dummy"></div>
  <div id="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

<div id="container" style="margin-left:2.5%;margin-top:7%">
  <div id="dummy"></div>
  <div id="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 30%;
    margin-left: 1.25%;
    margin-right: 1.25%;
    margin-top: 3%;
}

#dummy {
    padding-top: 75%;
}

#box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    -webkit-perspective: 1000;
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
}

#box img {
    height: 100%;
    width: 100%;
}

这是Fiddle

1 个答案:

答案 0 :(得分:0)

问题

  • 您在第一个#containerwidth:62.8%中设置内联样式,因此其他div换行换行。

因此,如果您希望所有人都在同一行,并保留当前的margin,则必须将width:22%应用于.container

备注

  • ID的必须是唯一的,因此请使用class
  • 避免使用内联CSS,而是在CSS文件中使用

更新(OP的评论)

  

问题是我希望其中一张图片大于   其他人仍然保持相同的格式,所以最后我想要一个3x3   桌子上有一张照片占据了2x2的可用空间

所以使用width:47%

container提供给nth-of-type(3n+1)#1,#4,#7等等

body {
  margin: 0
}
.container {
  display: inline-block;
  vertical-align:top;
  position: relative;
  width: 22%;
  margin-left: 1.25%;
  margin-right: 1.25%;
  margin-top: 3%;
}
.container:nth-of-type(3n+1) {
  width: 47%
}
.dummy {
  padding-top: 75%;
}
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.box img {
  height: auto;
  max-width: 100%;
}
<div class="container">
  <div class="dummy"></div>
  <div class="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

<div class="container">
  <div class="dummy"></div>
  <div class="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

<div class="container">
  <div class="dummy"></div>
  <div class="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

<div class="container">
  <div class="dummy"></div>
  <div class="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

<div class="container">
  <div class="dummy"></div>
  <div class="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>

<div class="container">
  <div class="dummy"></div>
  <div class="box">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  </div>
</div>