如何跨多个Divs CSS跨越元素 [英] How to Span Element Across Multiple Divs CSS
问题描述
我是Html&的初学者CSS，可能有一个非常简单的问题，但我似乎找不到答案:如何仅使用CSS&来跨多个div跨html元素(子div，文本等)?HTML(没有Javascript/JS)?我正在构建一个简单的事件日历(使用HTML + CSS)，目前正在处理多日事件.
I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
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.
The blue div/rectangle should also be able to span more than two parent divs if wanted.
我已经在网上进行搜索和研究；在StackOverflow上，但我似乎仍然找不到答案.任何帮助将不胜感激.
I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.
推荐答案
以下是使用您的代码进行一些更改的简单示例.我将位置添加到容器和第3个元素中，并使用.colorthree类将div上的z-index设置为2.
Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .colorthree.
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>这篇关于如何跨多个Divs CSS跨越元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
