Question

我是Html和CSS的初学者，可能有一个非常简单的问题，但是我似乎找不到答案：如何跨多个HTML元素（子div，文本等） div仅使用CSS和HTML（无Javascript / JS）？我正在建立一个简单的事件日历（使用HTML + CSS），目前正在处理多日事件。

tst_res.show()
+---+----------+---+----------+----------+----------+
| id|      date|key|  date_lag|  date_chk| last_date|
+---+----------+---+----------+----------+----------+
| A1|2020-01-06| K1|      null|      null|      null|
| A1|2020-01-06| K2|2020-01-06|      null|      null|
| A1|2020-01-07| K3|2020-01-06|2020-01-06|2020-01-06|
| A1|2020-01-07| K3|2020-01-07|      null|2020-01-06|
| A1|2020-01-20| K3|2020-01-07|2020-01-07|2020-01-07|
+---+----------+---+----------+----------+----------+

html, body {
  left: 0;
  margin: 0;
  background:white;
  height:100%;
}

b{
  font-family:calibri;
  padding-left:10px;
}

#container{
  margin: 0 auto;
  width:300px;
  padding-top:50px;
}

.colorone{
  background:#FFEB3B;
  width:150px;
  height: 150px;
  float:left;
}
.colortwo{
  width:150px;
  height: 150px;
  background:#8BC34A;
  overflow:hidden;
}

所需结果：

如果需要，蓝色div /矩形也应该能够跨越两个以上的父div。

我已经在网上和StackOverflow上进行了搜索和研究，但我似乎仍然找不到答案。任何帮助将不胜感激。

Answer 1

这是一个使用您的代码进行一些更改的快速示例。我将位置添加到容器和第3个元素中，并使用.colorthree类将div上的z-index设置为2。

{{ site.tags }}

var width = 0,
    container = $('#container');

container.children('div').each(function(){
    if(!$(this).hasClass('colorthree')) {
    width += $(this).width();
  }
});
container.width(width);
$('.colorthree').width(width-20);

html, body {
left: 0;
  margin: 0;
  background:white;
  height:100%;
}

b{
  font-family:calibri;
  padding-left:10px;
}

#container{
  margin: 20px auto;
  width:300px;
  height: 150px;
  position:relative;
  white-space: nowrap;
}

.colorone, .colortwo, .colorfour {
  width:150px;
  height: 150px;
  background:#8BC34A;
  overflow:hidden;
  float:left;
}
.colorone{
  background:#FFEB3B;
}
.colorfour {
  background: red;
}
.colorthree {
  z-index: 2;
  top: 20px;
  left: 10px;
  position: absolute;
  width:90%;
  height: 40px;
  background:blue;
  overflow:hidden;
}

Answer 2

您可以使用position: absolute

不需要javascript，只需使用html和css

html,
body {
  left: 0;
  margin: 0;
  background: white;
  height: 100%;
}

b {
  font-family: calibri;
  padding-left: 10px;
}

#container {
  margin: 0 auto;
  width: 300px;
  padding-top: 50px;
  position: relative;
}

.colorone {
  background: #FFEB3B;
  width: 150px;
  height: 150px;
  float: left;
}

.colortwo {
  width: 150px;
  height: 150px;
  background: #8BC34A;
  overflow: hidden;
}

.colorthree {
  background-color: blue;
  display: block;
  position: absolute;
  width: calc(100% - 50px);
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  line-height: 50px;
}

<html>

<head></head>

<body>
  <div id="container">
    <span class="colorthree">I'm Span!</span>
    <div class="colorone"><b>4</b>
    </div>

    <div class="colortwo"><b>5</b>
    </div>
  </div>

</body>

</html>

如何跨多个Divs CSS跨越元素

2 个答案: