例如:
HTML
console.log($('.container').width()); // 600px as we defined in css.
console.log($('.list').width()); // 600px
console.log($('.box').eq('-1').position().left + $('.box').outerWidth());
body{padding:0;margin:0;}
.container {
width: 600px;
backround:#E1BEE7;
}
.list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height:120px;
background:#FFCDD2;
}
.box {
margin:10px;
flex-shrink:0;
flex-grow:0;
flex-basis:auto;
width: 100px;
height: 100px;
text-align:center;
line-height:100px;
background: #F44336;
color:#FFF;
font-size:2rem;
}
.result{
padding:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="list">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
</div>
有10个盒子,每个盒子的宽度为100px,元素.list
的实际宽度应该是1000px而不是600px。
我尝试使用以下方法获取列表的实际宽度:最后一个子元素的左侧位置及其外部宽度
console.log($('.box').eq('-1').position().left + $('.box').outerWidth());
我想知道的是:有没有更好的方法来获取这种 flexbox 元素的实际宽度?是否存在一些更好的内置 javascript 或 jquery 方法?
最佳答案
我需要的只是el.scrollWidth
。
关于javascript - 如何获得显示 block 的实际宽度 flex-direction :column properly?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41673180/