时间戳

首页 > 解决方案 > 如果当前行的宽度太窄，则将子项的溢出移动到下一行

html - 如果当前行的宽度太窄，则将子项的溢出移动到下一行

问题描述

编辑： 我正在构建一个简单的事件日历（使用 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 上进行了搜索和研究，但我似乎仍然找不到答案，几乎没有任何问题，所以任何帮助将不胜感激。

标签： htmlcssoverflow

解决方案

这是一个非常疯狂的想法，它依赖于内联元素和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>

推荐阅读