将两个div放在一起（考虑到响应主题）

时间：2015-07-29 16:30:45

标签： html css layout alignment

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

我试图创建一个包含六张图片的拼贴画。此刻，我的所有图像都在左侧，一个接一个地向下运行。可能需要注意的是，我已经将这6张图片设置为六个不同div的背景，所有这些都位于＆＃34; Collage＆＃34; DIV。 我尝试将浮动应用于这6个相对div中的一个，但它只是消失了。

通常情况下，我只需将所有内容设置为像素并手动移动所有内容，但我的目标是响应式布局。

如何使图像相应地显示在彼此旁边？

＆＃13;
＆＃13; 
#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%;
}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

将以下代码添加到您的css 

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

如果你把你的班级放在你的id旁边并且摆脱像这样的内部div 

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

它可能会更像你正在寻找的东西

Output

答案 1 :(得分：0)

凭借绝对定位，一切都相对于父母而言是有针对性的。像bootstrap这样的响应式css框架是浮动元素。

当你浮动一些东西时，收缩包裹到内容的大小，除非你给它一个宽度。因此，要将6个项目一个接一个地浮动，它们不能超过16.66666667％（100％/ 6）。你的大班将成为：

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

以下小提琴演示了效果：

https://jsfiddle.net/30j3046d/

答案 2 :(得分：0)

第一个问题是您需要将div设置为inline-block。接下来的问题是，您需要在min-width上设置div。我能够用这个来解决这两个问题：

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

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

＆＃13;
＆＃13; 
#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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

很好地并排显示不同尺寸的图像

要显示彼此相邻的图像，请使用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>

相关问题
最新问题