html - 相对于它的邻居定位 DIV

Question

我想定位 div.product-video 相对于它的右下角(当屏幕宽度超过 900 像素时)。设置 margin-top 不是我想要的解决方案，因为 div.product-overview 高度的高度是动态的。也许有一个负边距的把戏？希望有人能帮助我:-)

编辑:

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

编辑2:

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 屏幕和(最大宽度:900px)

• 将视频 div 放在概览中。给出了概览position: relative

• 视频 div 被赋予 position: absolute 并根据需要适本地定位在右侧、左侧和底部

例子

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;
  }
}

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