编辑:
我正在构建一个简单的事件日历(使用 HTML+CSS)并且目前正在处理多天事件。
我是 HTML&CSS 的初学者，有一个非常简单的问题，但我似乎找不到答案:如果没有，如何让子 div 溢出到下一行(div 等)屏幕上(或 div 行)有足够的空间来容纳整个子 div？你能不能只用 HTML&CSS(如果可能)最多一点 JavaScript 来做？这就是我的意思应该发生:
如您所见，因为蓝色子 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>关于html - 如果当前行的宽度太窄，将 child 的溢出移到下一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62973720/