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

Question

我有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。

Answer 1

问题

• 您在第一个#container和width: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>