如何在响应式div的右侧添加div？

时间：2016-09-23 15:15:36

标签： html css

我基本上希望标签“div 1”显示在div的右侧我无论如何都要保持响应。有没有办法做到这一点？

我看不到能够保留我想要的响应能力的包装器。

#wrapper {
  width: auto;
  clear: both;
}
#second {
  background-color: blue;
  width: auto;
  float: left;
}
.items {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-top: -10px;
}
.items .item {
  flex: 1 0 200px;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
  width: auto;
  float: left;
}
@media (min-width: 410px) {
  .items .item {
    max-width: calc(50% - 10px);
  }
}
@media (min-width: 620px) {
  .items .item {
    max-width: calc(33.33333% - 10px);
  }
}
@media (min-width: 830px) {
  .items .item {
    max-width: calc(25% - 10px);
  }
}
@media (min-width: 1040px) {
  .items .item {
    max-width: calc(20% - 10px);
  }
}
@media (min-width: 1250px) {
  .items .item {
    max-width: calc(16.66667% - 10px);
  }
}
@media (min-width: 1460px) {
  .items .item {
    max-width: calc(14.28571% - 10px);
  }
}
@media (min-width: 1670px) {
  .items .item {
    min-width: calc(12.5% - 10px);
  }
}
<body>

  <div id="wrapper">

    <div class="items">
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Bob</label>
        <br/>
        <label style="margin-top:1px;">Bob</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Bob</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Bob</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Bob</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Bob</label>
      </div>
    </div>

    <div id="second">
      DIV 1
    </div>

  </div>

</body>

1 个答案:

答案 0 :(得分：0)

解决方案1：浮动

请考虑使用display: inline-block来订购您的div，而不是使用flexbox。这有两个好处：

1）它比flexbox有更好的跨浏览器支持（参见：caniuse on flexboxes），因为IE10和11不是100％支持它，你可能想要定位那些浏览器

2）它允许我们更好地利用float CSS属性，这对你正在寻找的东西很有用

如果您制作了所有.item div display: inline-block并将您想要的div放在HTML旁边的右侧，则可以向右侧应用float: right div，它会工作。不过，您应该注意一些注意事项，我将在下面解释。

HTML

这比您在问题中提供的内容简化 

<div id="wrapper">
    <div class="items">
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Shane</label>
        <br/>
        <label style="margin-top:1px;">Shane</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Shane</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Shane</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Shane</label>
      </div>
      <div class="item">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left">
        <label style="margin-top:1px;">Shane</label>
      </div>

      <div class="right">
          DIV 1
      </div>
    </div>
  </div>

CSS 

.items .item{
    display: inline-block;
}

.items .right{
    float: right;
}

已知问题

此解决方案存在一些问题，但它们是您可能会遇到的问题，特别是如果您提前了解它们。

首先，如果有 no 项，您可能需要清除父div，使其与浮动元素的高度匹配。

其次，与第一个类似，如果你的右边元素的高度高于项目的总组合内容，那么你 - 再次 - 需要一个明确的修复。

解决方案2：并排内容

另一种可能的解决方案是让所有商品都包含在x宽度的div中，并且您的正确内容包含在y宽度的div中，其中{{1} }是屏幕宽度减去y的100％。

HTML

所以，让我们采用基本相同的HTML（带有一些新的包装器）：

x

CSS

在这里，我们只计算出我们想要正确内容的大小，然后使用CSS <div id="wrapper" class="clearfix"> <div class="left"> <div class="items"> <div class="item"> <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left"> <label style="margin-top:1px;">Shane</label> <br/> <label style="margin-top:1px;">Shane</label> </div> <div class="item"> <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left"> <label style="margin-top:1px;">Shane</label> </div> <div class="item"> <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left"> <label style="margin-top:1px;">Shane</label> </div> <div class="item"> <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left"> <label style="margin-top:1px;">Shane</label> </div> <div class="item"> <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg" height="82" width="82" align="left"> <label style="margin-top:1px;">Shane</label> </div> </div> </div> <div class="right"> DIV 1 </div> </div> 方法找出其余内容，并使用calc()属性将它们放在旁边彼此。

float

你会得到一个非常相似的效果。不同之处在于超出正确内容高度的项目不会出现在其下方。

请注意，在这种情况下，我使用.left{ float: left; width: calc(100% - 150px); } .right{ float: left; width: 150px; } /* also throw in a clearfix for the wrapper */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } 作为正确的内容大小，但您可以随意更改为您想要的内容，只要您在150px和正确的大小调整中更改它

相关问题
最新问题