将两个 div 并排放置（考虑到响应式主题）答案

【问题标题】：Placing two divs next to each other (responsive theme in mind)将两个 div 并排放置（考虑到响应式主题）
【发布时间】：2015-07-30 01:28:55
【问题描述】：

在让我的 div 彼此相邻时遇到问题。我已经在论坛上搜索了几个小时，但没有成功。

我正在尝试用六张图片创建一个拼贴画。目前，我所有的图像都在左侧，一个接一个。需要注意的是，我将这 6 个图像设置为六个不同 div 的背景，所有这些都位于“拼贴”div 中。我尝试将浮点数应用于这 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>

【问题讨论】：

标签： html css layout alignment

【解决方案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>

【讨论】：

很棒的小巨人！快速问题，如何将文本设置为底部？我尝试使用垂直对齐属性，但它仍然与顶部对齐。

【解决方案2】：

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

当你浮动一些东西时，它会收缩到内容的大小，除非你给它一个宽度。因此，要让 6 个项目并排浮动，它们的宽度不能超过 16.66666667% (100%/6)。你的大班会变成：

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

下面的fiddle演示了效果：

https://jsfiddle.net/30j3046d/

【讨论】：

【解决方案3】：

第一个问题是您需要将divs 设置为inline-block。然后下一个问题是你需要在你的divs 上设置一个min-width。我能够使用这个解决这两个问题：

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

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

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

【讨论】：

【解决方案4】：

将以下代码添加到您的 css 中

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

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

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

它可能会比你想要的更多

Output

【讨论】：

输出没有内部 div - 可以在 jsbin 中编辑
jsbin.com/direnalako/edit?html,css,output 带有内部 div 的输出，jsbin.com/direnalako