问

javascript - 设置六个div的宽度为网页宽度/6，第六个会换行

阳光而灿烂61 发布于 2022-11-13 10:48

html

text

css

java

我的目标：获取网页宽度、高度。动态生成18个p块，高度为网页高度/3，宽度为网页宽度/6。

HTML:



    
        demo

JS:

var sW = document.body.clientWidth;

var sH = document.body.clientHeight;


function cre(){
    let pose = document.createElement("p");

    pose.setAttribute("class","ap");
    
    pose.setAttribute("style","display:inline-block");

    pose.style.height=sH/3+"px";

    pose.style.width=sW/6+"px";
        

    document.body.appendChild(pose);
}


function firstPose(){
    for(let i=0; i<18 ; i++  ){
        
            setTimeout(cre(),300);
        
            if(i==5||i==11||i==17){

                document.body.appendChild(document.createElement("br"));
            }
            
        }
    }


window.onload=firstPose();

CSS:

html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    width: 100%;
    margin: auto;
    line-height: 10px;
}

.ap{
    background: black;
    margin: 0;
    padding: 0;
}



.ap:hover{
    opacity: 0;
}

效果图：

6 个回答

题主告诉你个最简单的解决办法吧 p设置display=“inline-block”的时候会自带一个默认大小的间隔 font-size=“0”就能解决不过唯一的缺陷就是：p填充内容的话要单独设置font-size。。

2022-11-13 12:30 回答

农大军乐团_697
demo

2022-11-13 12:30 回答

似是故人来
有一个问题楼上也说到了，v既然是viewport，那么他的大小是可视化区域的大小，如果想在父级元素下面进行等比划分的话，使用vh,vw是不行的，因为不是相对于父级元素，而是相对于可视区域。

2022-11-13 12:30 回答

lmc的
不建议使用vh vw, 兼容性不好.
直接用百分比即可, 而且百分比是基于上层容器的宽度.
vh vw, v是什么含义?(我不是在问问题, 自行百度思考一下)

比如说有一个局部的组件去开发, 平行4个等宽的p去呈现头像, 也用vw?

2022-11-13 12:30 回答

zc43pml
/3, /6 出现换行或者纵向滚动条应该是因为小数点的问题，毕竟 px 的最小单位是 1

可以尝试前面几行/列的值向上取整，最后一行/列使用总值减其他行/列和；

-- 不过不建议这样，毕竟窗口宽度会变化，那你还得监听 resize 重新计算赋值。

最好是直接在 CSS 中使用 %：
```
html, body { height: 100%; margin: 0; padding: 0;}
.item { height: 33.33333%; width: 16.66666%;}
```
-- 自己测试一下哈。 --

如下，加了个随机背景颜色

或者对兼容性要求不高的话，建议使用楼上的 vh.
2022-11-13 12:30 回答

我怀念的2502909393_663

不用大动干戈...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .item{
            float: left;
            overflow: hidden;
            width: 16.6vw;
            height: 33vh;
            box-sizing: border-box;
            border: 2px solid salmon;
            background: yellowgreen;
        }
    </style>
</head>
<body>
<script>
    document.body.innerHTML=new Array(18)
        .fill(null)
        .map(()=>'<p class="item"></p>')
        .join('')
</script>
</body>
</html>

jsfiddle

2022-11-13 12:30 回答

亲爱one

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签