「前端基础」js 实现3个div一行

div是响应宽度,想3个div一行,一共有10个div;用js实现。求大神给个代码,初学者请多多指教,多谢了!

回答
iFat3 ,简书:iFat3,网站:42度空间(www.42du.cn)

直接用bootstrap吧,省事 getbootstrap.com

7个月前评论 0分享
小小贤呐呐 ,干干净净没有故事,一个帅字贯穿一生。

可以用css加浮动或者定位啊

7个月前评论 0分享

你用js实现div一行本身就是走了弯路,能css实现的,为什么要用js呢。大概思路就是一排总共是100%的宽度,你要放三个,那么每个div的宽度就是33.33%;用display:inline-block;注意的是可能有回车占位,所以最好把父级的font-size:0;

7个月前评论 0分享
郭永杰 ,前端开发者
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <div>this is a div</div>
  <script type="text/javascript">
  // 1
  // let divCollections = document.getElementsByTagName('div')
  // for (let divItem of divCollections) {
  // divItem.style.width = `calc(100% / 3)`
  // divItem.style.float = 'left'
  // }

  // 2
  function sortDivByNumber(num) {
    let divCollections = document.getElementsByTagName('div')
    for (let divItem of divCollections) {
      divItem.style.width = `calc(100% / ${num})`
      divItem.style.float = 'left'
    }
  }
  sortDivByNumber(3)
  // setDivByNumber(4) 4个一行
  // setDivByNumber(5) 5个一行
  </script>
</body>

</html>
5个月前评论 0分享
我来回答
无用回答
问题修改记录
暂无修改记录
广告位 点击查看投放指南

我的收藏