我想定位 div.product-video 相对于它的右下角(当屏幕宽度超过 900 像素时)。设置 margin-top 不是我想要的解决方案,因为 div.product-overview 高度的高度是动态的。也许有一个负边距的把戏?希望有人能帮助我:-)
编辑:
当屏幕宽度超过 900 像素时,我希望 div.product-video 贴在 div.product.overview 的右下角。否则应该显示在 div.product-overview 下
编辑2:
我想将 div.product-video 定位到 div.product-overview 的右下角,而与 div.product-overview 的高度无关。
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;
}
}
最佳答案
您的@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>
关于html - 相对于它的邻居定位 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26524341/