EDIT:我正在构建一个简单的活动日历（使用 HTML+CSS），目前正在处理多日活动。
我是 HTML&CSS 的初学者，有一个非常简单的问题，但我似乎找不到答案：如果没有，如何使子 div 溢出到下一行（div 等）屏幕上（或 div 行）上有足够的空间来容纳整个子 div 吗？你能最多只用 HTML&CSS（如果可能的话）来做到这一点吗？bitJavaScript 的？这就是我的意思应该发生的事情：
正如您所看到的，因为蓝色子 div 溢出到了 div 的第二行，因为它太大而无法容纳第一行。目前，如果我的蓝色 div 太大，它只会溢出到侧面（运行下面的代码）。
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;
border: 1px;
position:relative;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
.colorthree{
left: 10px;
position: absolute;
width: 150%;
height: 20px;
background:blue;
overflow:hidden;
}
<html>
<body>
<div id="container">
<div class="colorone">
<b>4</b>
<div class="colorthree"></div>
</div>
<div class="colortwo"><b>5</b></div>
<div class="colortwo" style="float:left"><b>6</b></div>
<div class="colorone"><b>7</b></div>
</div>
</body>
</html>
我已经在网上和 Stack Overflow 上进行了搜索和研究，但我似乎仍然找不到答案，而且几乎没有任何问题，所以任何帮助将不胜感激。
这里有一个太疯狂了依赖于内联元素的想法和linear-gradient.
#container {
margin: 20px auto;
width: 450px;
display:flex;
flex-wrap:wrap;
position:relative;
}
#container > * {
width:33.33%;
height: 150px;
background: #FFEB3B;
}
#container > *:nth-child(odd){
background: #8BC34A;
}
#container > span {
/* cover all the container */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/* */
background:none!important;
line-height:150px; /* same as height here */
font-size: 130px; /* a big font-size to cover more area */
overflow:hidden; /* hide extra overflow of the "phantom" text */
text-align:justify; /* we justify the "phantom" text to span until the end */
}
/* the below inline element will wrap different lines and will cover all the grid
and since the line-height = height, we will have a perfect illusion of a continuous line
over the different cells */
#container > span span {
background:
linear-gradient(var(--c,blue) 0 0) /* the color */
calc(var(--left)*150px) var(--top)/ /* the position */
calc(var(--width)*150px) var(--height) /* the size */
no-repeat;
}
#container > span span:before {
content:". . . . . . . . . ."; /* phantom text to fill the inline element*/
font-size: 300px; /* big enough to avoid having a long phantom text but not too much to make sure there is at least two characters per line to trigger the justify */
line-height:0; /* we obey the to above line-height */
visibility:hidden; /* we don't need to see the text */
}
<div id="container">
<!-- calender element --->
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
<div><b>6</b></div>
<div><b>7</b></div>
<div><b>8</b></div>
<div><b>9</b></div>
<!-- line elements -->
<span style="--left:0;--top:20px;--height:20px;--width:4"><span></span></span>
<span style="--left:2;--top:40px;--height:40px;--width:4;--c:red;"><span></span></span>
<span style="--left:4;--top:100px;--height:10px;--width:3;--c:black"><span></span></span>
<span style="--left:0;--top:90%;--height:20px;--width:9;--c:purple"><span></span></span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
