账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    自動換行佈局
    41
    0

    有一個佈局需求:
    類似表格佈局, 單元格固定大小, 在容器寬度發生變化時, 如果一行的寬度如果不夠, 多出的單元格自動換行, 但同時每一行的單元格都需要平均分配一行的寬度大小.

    這個是用js寫的效果, 請問如何只使用css3來達到同樣的效果.
    codepen鏈接(需要手動調整窗口大小來查看效果):
    https://codepen.io/darcrand/f...

    2018-08-12 補充:
    非常感謝各位的回答, 可能是我的沒有把問題描述清楚, 下面我將代碼貼出:

    dom部分
    <div class="box">
      <div class="cell">
        <div class="content">A</div>
      </div>
      <div class="cell">
        <div class="content">B</div>
      </div>
      <div class="cell">
        <div class="content">C</div>
      </div>
      <div class="cell">
        <div class="content">D</div>
      </div>
      <div class="cell">
        <div class="content">E</div>
      </div>
      <div class="cell">
        <div class="content">F</div>
      </div>
      <div class="cell">
        <div class="content">G</div>
      </div>
      <div class="cell">
        <div class="content">H</div>
      </div>
      <div class="cell">
        <div class="content">I</div>
      </div>
      <div class="cell">
        <div class="content">J</div>
      </div>
      <div class="cell">
        <div class="content">K</div>
      </div>
      <div class="cell">
        <div class="content">L</div>
      </div>
    </div>
    css部分
    .box {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #000;
      box-sizing: border-box;
    }
    
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 200px;
      margin: 20px auto;
      font-size: 32px;
      font-weight: bold;
      background-color: rgb(37, 180, 144);
    }
    js部分
    const cells = document.querySelectorAll('.cell')
    
    function getStyle(ele) {
      return ele.currentStyle ? ele.currentStyle : window.getComputedStyle(ele, null)
    }
    
    function resize() {
      const boxWidth = parseInt(getStyle(document.querySelector('.box')).width, 10)
      const padding = 10
      const cellMinWidth =
        parseInt(getStyle(document.querySelector('.content')).width, 10) + 2 * padding
      const eachLineCount = Math.floor(boxWidth / cellMinWidth)
      const percent = Math.floor(100 / eachLineCount * 100) / 100
      cells.forEach(ele => {
        ele.style.width = `${percent}%`
      })
    }
    
    resize()
    window.addEventListener('resize', resize)

    首先我已經使用了flex佈局, 其次使用justify-content: center時, 會出現問題:
    儅最後一行的單元格數量小於其他行的時候, 其中的單元格的位置佈局就會跟其他行的不一樣, 沒有左對齊.

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 灵魂枷锁 普通会员 1楼

      在Java中,我們可以使用"\n"字符來實現自動換行。以下是一個簡單的範例:

      java public class Main { public static void main(String[] args) { String text = "Hello\nWorld"; System.out.println(text); } }

      在這個範例中,我們在text字符串中使用了"\n"字符來實現自動換行。這將使得文本在每行末尾添加換行符"\n",從而實現了自動換行的效果。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部