我是 Html 和 CSS 的初学者，有一个可能非常简单的问题，但我似乎无法找到答案:如何跨多个 div 仅使用跨 html 元素(子 div、文本等) CSS 和 Html(没有 Javascript/JS)？我正在构建一个简单的事件日历(使用 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;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}<html>
<head></head>
<body>
<div id="container">
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>想要的结果:
如果需要，蓝色 div/矩形也应该能够跨越两个以上的父 div。
我已经在网上和 StackOverflow 上进行了搜索和研究，但似乎仍然找不到答案。任何帮助将不胜感激。
最佳答案
这是使用您的代码进行一些更改的快速示例。我将位置添加到容器和第 3 个元素，并在 .colorthree 类的 div 上将 z-index 设置为 2。
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="colorone"><b>1</b></div>
<div class="colortwo"><b>2</b></div>
<div class="colorfour"><b>4</b></div>
<div class="colorthree"><b>3</b></div>
</div>关于html - 如何跨多个 Div 跨元素 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62964315/