如果当前行的宽度太窄，则将子控件的溢出移到下一行 [英] Move Child's Overflow To Next Row If Current Row's Width Too Narrow
问题描述
编辑：
我正在构建一个简单的事件日历（使用HTML + CSS），目前正在处理多日活动。
I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
我是HTML& CSS的初学者，并且有一个非常简单的问题，但是我似乎找不到答案：如果没有子div，如何使子div溢出到下一行（div等）？屏幕（或div的行）上没有足够的空间来容纳整个子div？并且您最多只能使用HTML& CSS（如果可能）最多 bit 的JavaScript吗？这就是我的意思：
I'm a beginner to HTML&CSS and have a pretty straightforward question, but i just can't seem to find the answer: How can you make a child div overflow to the next row(of divs, etc.) if there isn't enough space on the screen(or on the row of divs) to fit the whole child div? And could you do it with only HTML&CSS(if possible) at most a bit of JavaScript? Here's what i mean should happen:
如您所见，因为蓝色的孩子div溢出到div的第二行，因为它很大以适合第一行。目前，如果我的蓝色div太大，它将溢出到一边（下面的运行代码）。
As you see, because the blue child div overflows to the second row of divs because it is to large to fit in just the first row. Currently, if my blue div is too large, it will just overflow to the side(run code below).
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>
我在网上搜索和研究了;
I've searched and researched online & on Stack Overflow but I still can't seem to find the answer, and barely any questions on it, so any help would be greatly appreciated.
推荐答案
这是一个非常疯狂的想法，它依赖于内联元素和 linear-gradient 。
Here is a very crazy idea relying on inline element and 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>
这篇关于如果当前行的宽度太窄，则将子控件的溢出移到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
