将两个 div 并排放置（记住响应主题）

Question

让我的 div 并排放置时遇到问题。我已经在论坛上搜索了几个小时，但没有成功。

我正在尝试创建包含六张图片的拼贴画。目前，我所有的图像都在左侧运行下方，一张接一张。可能需要注意的是，我已将这 6 张图像设置为六个不同 div 的背景，它们都位于 "Collage" div 中。我试过将 float 应用于这 6 个相对 div 之一，但它就消失了。

通常我会以像素为单位设置所有内容并手动移动所有内容，但我的目标是响应式布局。

如何让图片响应式地并排显示？

#collage-container {
  max-width: 97%;
  padding-right: 1%;
  padding-left: 5%;
  position: relative;
  padding-bottom: 15%;
  height: 0;
}
#collagecont2 {
  position: relative;
  max-width: 47%;
  min-height: 70em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont3 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont4 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont5 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont6 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont1 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.large:hover {
  color: #FF0000;
}
.large {
  position: absolute;
  color: #00FF00;
  font-family: arial;
  font-size: 20pt;
  bottom: 1%;
}
}

<div id="collage-container">
  <div id="collagecont1">

    <div class="large">
      This is a DIV sample.
    </div>

  </div>

  <div id="collagecont2">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont3">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont4">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont5">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont6">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>
</div>

Answer 1

将以下代码添加到您的 css

#collagecont1.large, #collagecont2.large, #collagecont2.large, #collagecont4.large, #collagecont5.large, #collagecont6.large{display:inline-block;}

如果你把你的 class 放在你的 id 旁边，然后像这样去掉里面的 div

 <div id="collagecont1" class="large">

它可能会更符合您的要求

Output

Answer 2

使用绝对定位，一切都相对于父级定位。像 bootstrap 这样的响应式 css 框架使用的是浮动元素。

当您浮动某些内容时，除非您给它一个宽度，否则它会收缩包裹到内容的大小。因此，要将 6 个项目一个接一个地浮动，它们的宽度不能超过 16.66666667% (100%/6)。您的大 class 将变为：

.large {
    float: left;
    width: 16.6%;
 }

下面fiddle演示效果：

https://jsfiddle.net/30j3046d/

Answer 3

第一个问题是您需要将 div 设置为显示为 inline-block。那么下一个问题是您需要在 div 上设置一个 min-width。我能够使用这个解决这两个问题：

div[id^=collagecont] {
   display: inline-block;
   min-width: 30%;
}

但是，最好在您的 div 中添加一个 class 并将所有类似的属性放在一起。

#collage-container {
  max-width: 97%;
  padding-right: 1%;
  padding-left: 5%;
  position: relative;
  padding-bottom: 15%;
}
#collagecont2 {
  position: relative;
  max-width: 47%;
  min-height: 70em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont3 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont4 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont5 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont6 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont1 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
div[id^=collagecont] {
  display: inline-block;
  min-width: 30%;
}
.large:hover {
  color: #FF0000;
}
.large {
  position: absolute;
  color: #00FF00;
  font-family: arial;
  font-size: 20pt;
  bottom: 1%;
}

<div id="collage-container">
  <div id="collagecont1">

    <div class="large">
      This is a DIV sample.
    </div>

  </div>

  <div id="collagecont2">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont3">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont4">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont5">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont6">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>
</div>

Answer 4

并排显示不同尺寸的图片

要并排显示图像，请使用 CSS 列和 display:inline-block 个子项。在父级上使用 font-size: 0 并在子级上使用 font-size: insert font size 来中和元素之间的白色-space。

#collage-container {
  font-size: 0;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}
[id^="collagecont"] {
  font-size: 20pt;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

保持div纵横比

使用the css padding trick保持图像的纵横比。您有不同尺寸的图像，因此父级上的 padding-bottom 属性会因尺寸而异。

[id^="collagecont"] {
  background-size: cover;
  background-repeat: no-repeat;
}
#collagecont1 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont2 {
  padding-bottom: 120%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
}
#collagecont3 {
  padding-bottom: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont4 {
  padding-bottom: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont5 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont6 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}

下面的演示中不太重要的其他代码简化。

body {
  margin: 0;
}
#collage-container {
  padding: 5%;
  box-sizing: border-box;
  font-size: 0;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}
[id^="collagecont"] {
  font-size: 20pt;
  width: 98%;
  display: inline-block;
  vertical-align: top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  color: #00FF00;
  font-family: arial;
  margin: 1%;
}
[id^="collagecont"]:hover {
  color: #FF0000;
}
.large {
  position: absolute;
  width: 100%;
  height: 100%;
}
#collagecont1 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont2 {
  padding-bottom: 120%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
}
#collagecont3 {
  padding-bottom: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont4 {
  padding-bottom: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont5 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont6 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}

<div id="collage-container">
  <div id="collagecont1">

    <div class="large">
      This is a DIV sample.
    </div>

  </div>

  <div id="collagecont2">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont3">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont4">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont5">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont6">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>
</div>

将两个 div 并排放置（记住响应主题）

Placing two divs next to each other (responsive theme in mind)

html

css

layout

alignment

并排显示不同尺寸的图片

保持div纵横比