[英]How to get actual width of a block displayed with flex-direction:column properly?
For Example: 例如:
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>
There is 10 boxes, and each box with 100px width, the actual width of element .list
should be 1000px not 600px. 有10个框,每个框的宽度为100px,元素
.list
的实际宽度应为1000px,而不是600px。
I tried to use the following method to get actual width of list: The left position of last child element and its outerWidth 我尝试使用以下方法获取列表的实际宽度:最后一个子元素的左侧位置及其externalWidth
console.log($('.box').eq('-1').position().left + $('.box').outerWidth());
What I want to know: is there a better method to get actual width of this kind of flexbox element? 我想知道的是:有没有更好的方法来获取这种flexbox元素的实际宽度? some better built-in javascript or jquery method exists for this?
为此存在一些更好的内置javascript或jquery方法?
我需要的只是el.scrollWidth
。
As you've discovered, scrollWidth
will provide you the dimension you're looking for. 如您
scrollWidth
, scrollWidth
将为您提供所需的尺寸。 The reason that outerWidth
isn't giving you the total width of the internal elements is that your .list
element is actually 600px wide. outerWidth
无法为您提供内部元素总宽度的原因是您的.list
元素实际上为600px宽。 The additional content is overflowing its parent, allowing it to display despite being outside of the .list
. 附加内容溢出了其父级,即使位于
.list
之外也允许其显示。
You can test this by changing the overflow
property to hidden
on .list
: 您可以通过将
overflow
属性更改为hidden
在.list
:
body{ padding:0; margin:0; } .container { width: 600px; } .list { display: flex; flex-direction: column; flex-wrap: wrap; height: 120px; background: #FFCDD2; overflow: hidden; } .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; }
<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>
Note that when you run this, the .list
element clips the remaining boxes. 请注意,运行此命令时,
.list
元素将.list
其余的框。
Hopefully this helps you understand what is going on in addition to solving the problem for you. 希望这可以帮助您除了为您解决问题之外,了解正在发生的事情。 Cheers!
干杯!
Probably more code than you wanted, but you could just sum the width of the elements inside the div, using javascript with jQuery like this: 可能比您想要的代码更多,但是您可以使用jQuery这样的javascript,将div中元素的宽度求和:
var totalWidth = 0;
$('.box').each(function() {
totalWidth += $(this).width();
});
$('#msg').html(
"<p>totalWidth: " + totalWidth + "</p>"
);
with a live example: https://jsfiddle.net/yeeqkd2e/4/ 带有实时示例: https : //jsfiddle.net/yeeqkd2e/4/
or without jQuery 或没有jQuery
var totalWidth = 0;
var cont = document.getElementsByClassName('box');
for (var i = 0, len = cont.length; i < len; i++) {
totalWidth += cont[i].offsetWidth;
}
document.getElementById('msg').innerHTML = "<p>totalWidth: " + totalWidth + "</p>";
Native Javascript: https://jsfiddle.net/yeeqkd2e/6/ 本机Javascript: https : //jsfiddle.net/yeeqkd2e/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.