gpt4 book ai didi

javascript - 如何调整div的大小以填充所有空间

转载 作者:行者123 更新时间:2023-11-28 01:52:04 25 4
gpt4 key购买 nike

<head>
<style type="text/css">
.bar {
background-color:red;
height:100%;
display: inline-block;
border: 1px solid black;
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


</head>
<body>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
var count = 7;
var divs = $('.bar');
for (var i = 0; i < divs.length; i++) {
$(divs[i]).width((100/count) +'%');
}
});
</script>

上面输出中的一个条低于第一个,即不是所有的条排成一行,我该怎么做?可能吗?

最佳答案

好吧,我对 JS 做了一个非常小的改动,然后我将 .bar 的父级设置为 100%,这将强制它占用 100%,因为它已设置为 100% 无 - 即 0

此外,使用 box-sizing 会强制将 borders 计算为 width/height div

jsFiddle here

更新的 JS - 注意变化..

$(window).load(function(){
$(document).ready(function () {
var count = 7;
var divs = $('.bar');
for (var i = 0; i < divs.length; i++) {
$(divs[i]).width((100 / count - 2) + '%');
}
});

更新的 CSS

.bar {
background-color:red;
height:100%;
display: inline-block;
border: 1px solid black;
float:left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body, html {
height:100%;
margin:0px;
}

关于javascript - 如何调整div的大小以填充所有空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19434056/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com