html - 将两个 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 列和 display:inline-block 子项。在父元素上使用 font-size: 0 并在子元素上使用 font-size: insert font size 来中和元素之间的空白。

#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>