Question

我希望在宽屏幕上实现以下功能，将div三角形div叠加到div后面的div（contenido），使用类“evento”，我尝试使用position：absolute，但是作为bootstrap调整列的大小我不要太漂亮，（请查看整页）：

.triangulo_div{
            display: none;
        }
@media screen and (min-width: 768px) {

.triangulo_div{
                display: block;
                position: absolute;
                left: 15vh;
                top: 7.9vh;
                z-index: 5;
            }
            .triangulo_rectangulo {
                width: 0;
                height: 0;
                text-indent: -9999px;
                border-top: 90vh solid #FE6A04;
                border-right: 50px solid transparent;
            }
     }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="background-color: #001143; color: white">
    <div class="container-fluid">
<div class="row">
            <div class="col-sm-1 evento" style="background-color:#FE6A04;">
                BOX
            </div>
            <div id="triangulo_div" class="col-sm-2 triangulo_div"><p class="triangulo_rectangulo">triangulo rectangulo.</p></div>
            <div class="col-sm-2" style="background-color:#06184A;">
                <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
                </div>
            </div>
            <div id="contenido" class="col-sm-4 contenido" style="background-color:#4FCCE8;">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
            </div>
            <div class="col-sm-2 menu_siguiente" style="background-color:#06184A;">
                <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</div>
            </div>
        </div>
</div>
</div>

编辑：.triangulo_div必须保留：calc（16.66666667％* -.08）加载时，但我希望在调整大小时将其保留在.evento

Answer 1

以下是您的一个想法：https://codepen.io/panchroma/pen/owvyoz

CSS中的重要部分是我将triangulo_div元素的位置从绝对位置更改为相对位置，并且我将左侧偏移量计算为百分比

@media screen and (min-width: 768px) {

.triangulo_div{
  display: block;
  /*position:absolute; */
  position: relative;
  /*left: 15vh; */
  left:calc(16.66666667% * 2);
  /*top: 7.9vh; */
  z-index: 5;
  }
}

HTML正是您所拥有的。

16.66666667％值来自bootstrap .col-sm-2的宽度，因此当视口更改时，它将适应更宽或更窄的列宽。

如果你需要添加填充或其他微调，那就很容易了，例如

left:calc((16.66666667% * 2) + 15px);

我希望这有助于你解开！

Answer 2

我设法使用left:-1.1em;解决了这个问题而不是left:calc(16.66666667% * -.08)。

看起来这很简单

覆盖浮动1步左侧div与另一个div

2 个答案: