Question

我想将div.product-video相对于其邻居右下角定位（当屏幕宽度超过900px时）。设置margin-top不是我想要的解决方案，因为div.product-overview高度的高度是动态的。也许有一个带负利润的伎俩？希望有人能帮助我： - ）

编辑：

当屏幕宽度超过900px时，我希望div.product-video贴在div.product.overview的右下角。否则，它应显示在div.product-overview

下

EDIT2：

Image

我想将div.product-video定位到div.product-overview的右下角，与div.product-overview的高度无关。

Link to jsFiddle

HTML

<div class="product">
    <div class="product-overview">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <ul class="product-benefits">
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
        </ul>
    </div>
    <div class="product-video">
        <p>VIDEO</p>
    </div>
</div>

CSS

div.product
{
    width: 100%;
}

div.product-overview
{
    float: left;
    box-sizing: border-box;
    min-width: 500px;
    width: 50%;
    background-color: orangered;
    padding-right: 150px;
}

div.product-video
{
    float: left;
    min-width: 400px;
    width: 40%;
    max-width: 50%;
    height: 250px;
    background-color: lightblue;
}

@media (min-width: 900px)
{
    div.product-video
    {
        margin-left: -100px;
    }
}

Answer 1

您的@media查询应如下所示：

@media screen and (max-width: 900px)

将视频div放在概述中。概述是position: relative
视频div已获得position: absolute，并根据需要正确定位右侧，左侧和底部

实施例

＆＃13;

div.product {
  width: 100%;
}
div.product-overview {
  box-sizing: border-box;
  min-width: 500px;
  width: 50%;
  background-color: orangered;
  padding-right: 150px;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
}
div.product-video {
  min-width: 400px;
  width: 40%;
  max-width: 50%;
  height: 250px;
  position: absolute;
  background-color: lightblue;
  right: -200px;
  bottom: -50%;
}
@media screen and (max-width: 900px) {
  div.product-video {
    left: 0;
    bottom: -250px;
  }
}

＆＃13;

<div class="product">
  <div class="product-overview">
    <h2>Lorem ipsum dolor sit amet</h2>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <ul class="product-benefits">
      <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
      <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
      <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
      <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
      <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
      <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
    </ul>

    <div class="product-video">
      <p>VIDEO</p>
    </div>
  </div>
</div>

＆＃13;

相对于其邻居定位DIV

1 个答案:

实施例