確定動態CSS3多列DIV的寬度width固定的列寬
[英]Determine the Width of a dynamic CSS3 Multicolumn DIV width fixed column-width
問題描述
我有一個充滿動態文本的DIV容器。 文字的長度可以不同。 DIV容器具有固定的高度，但沒有寬度。
文本的格式為CSS3多columns-width文本，寬度為固定的columns-width 。
結果是n列，其寬度為column-width 。 現在我想知道那里有多少列，或者DIV的計算width是多少。
CSS代碼：
.columnize{
float: left;
position: relative;
width: 840px;
overflow: hidden;
}
.columnize div{
-moz-column-width: 259px;
-webkit-column-width: 259px;
-moz-column-gap: 16px;
-webkit-column-gap: 16px;
height: 560px;
}
HTML代碼：
<div id="columnWrapper class="columnize">
<div id="content">
... content goes here ...
</div>
</div>
我試圖像這樣用JQuery獲得寬度：
$('#content').width();
$('#content').innerWidth();
兩者都返回column-width ，而不是除Firefox以外的所有瀏覽器中的REAL width 。
任何想法如何獲得列布局的寬度？
4 個解決方案
解決方案1
7 2012-01-08 19:27:21
我在嘗試使用css3列作為頁面水平分頁文章時遇到了相同的問題。 這是我作為jQuery插件的解決方案：
http://jsfiddle.net/rkarbowski/Sfyyy/
這是一個想法：在列內容的末尾插入一個空白的<span>標記，並使用.position()抓住其相對於父容器的left位置，並添加一個-webkit-column-width （因為.position()僅告訴您到<span>的left坐標的距離。
這是一個我不理解的怪癖。 要獲得正確的寬度，還必須減去一個-webkit-column-gap 。 在我看來， .position().left與容器邊緣之間的距離應僅是最后-webkit-column-width 。 誰能解釋這個？ 我只是數學不好？
對不起，如果插件代碼草率； 我對jQuery的經驗有限:)
（在適當的位置提供信貸：該想法改編自“ 如何在Javascript中獲取CSS3多列計數” ）。
解決方案2
0 2013-09-05 19:19:37
我也遇到了類似的問題，我必須獲取要包含在其中的列的大小
分頁機制。
我共享代碼，希望能有所幫助。
感謝rkarbowski的想法：-)
<!--
Horizontal sliding carousel with multi columns.
-->
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
#prev, #next, #infopage {
position: fixed;
width: 50px;
height: 50px;
background-color: yellow;
margin: 10px;
}
#prev {
top: 600px;
left: 0px;
}
#next {
top: 600px;
left: 60px;
}
#infopage {
top: 600px;
left: 120px;
background-color: lavender;
}
.guide {
position: fixed;
top: 0px;
left: 0px;
width: 1000px;
height: 500px;
-webkit-box-sizing: border-box;
border: 20px solid red
}
#content {
position: fixed;
top: 0px;
left: 0px;
width: 1000px;
}
#inner {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-width: 490px;
height: 500px;
}
</style>
<script>
var cntWidth, // content total length
areaWidth = 1000, // visible area
columnWidth = 490, // 1 columns minus gap
pageTot, // total number of pages
pageCur = 1, // active page
gap = 20, // space between columns
animDuration = 400, /* jquery default 400 */
contentPos = null; // content left position
function renderInfoPage() {
var elm = $('#infopage');
elm.html('page ' + pageCur + ' of ' + pageTot);
}
function getPositionDom() {
// keep in memory dom position
var elm = $('#content');
var pos = elm.offset();
contentPos = pos.left;
}
// has content a jquery animation queue?
function hasContentAnimateQueue() {
var queueN = $('#content').queue().length;
if (queueN !== 0) {
return true;
} else {
return false;
}
}
function next() {
if (pageTot > 0 && pageCur < pageTot) {
if (!hasContentAnimateQueue()) {
var elm = $('#content');
var newPos = contentPos - areaWidth - gap;
contentPos = newPos;
elm.animate({left: newPos + 'px'}, animDuration);
pageCur++;
renderInfoPage();
}
}
}
function prev() {
if (pageCur > 1) {
if (!hasContentAnimateQueue()) {
var elm = $('#content');
var newPos = contentPos + areaWidth + gap;
contentPos = newPos;
//elm.css({left: newPos + 'px'}); // use this for no animation
elm.animate({left: newPos + 'px'}, animDuration);
pageCur--;
renderInfoPage();
}
}
}
function start() {
// add event listeners
var elm = document.getElementById('prev');
elm.addEventListener('click', prev);
elm = document.getElementById('next');
elm.addEventListener('click', next);
// trick: add a span at the end of the scrolling, get its position so to find out total how long was were columns
var elmSpan = $('#inner').append('<span></span>');
var posSpan = $('#inner').find('span:last-of-type').position().left;
// add the width of the final column
//posSpan += parseInt($('#inner').css('-webkit-column-width'), 10);
posSpan += columnWidth;
// subtract one column gap (not sure why this is necessary?)
//pos -= parseInt($('#inner').css('-webkit-column-gap'),10);
posSpan -= gap;
// remove empty <span>
$('#inner').find('span:last-of-type').remove();
cntWidth = posSpan; // the total clumns width!
var result = cntWidth / areaWidth;
if (result <= 1) {
pageTot = 1; // in case of content wich is wihtin the first page
} else {
pageTot = Math.ceil(cntWidth / areaWidth);
}
// first time
renderInfoPage();
getPositionDom();
}
</script>
</head>
<body onload="start()">
<div class="guide"></div>
<div id="content"><div id="inner">
<figure>
<img src="http://www.w3schools.com/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper mi velit, sit amet elementum libero ultrices sed. Praesent ut fermentum neque. Etiam mauris sem, placerat ac feugiat a, pulvinar sed nulla. Nam id augue erat. Sed a neque commodo, fringilla magna a, sollicitudin nisl. Sed tellus nisi, pretium id turpis id, venenatis hendrerit lectus. Maecenas mauris enim, pulvinar a porttitor eu, volutpat sit amet magna. Sed sit amet orci libero. Pellentesque eu elit sit amet felis lacinia convallis. Cras vel dui egestas, vehicula nulla nec, commodo quam. Pellentesque ligula leo, lobortis vitae eros in, pulvinar ornare elit. Suspendisse augue tortor, imperdiet ut ipsum id, pulvinar rhoncus odio.
</p>
<p>
Quisque in neque tempus, consectetur erat at, eleifend diam. Aenean bibendum sollicitudin velit, non dignissim eros tristique vel. Ut a risus vitae quam lobortis suscipit ut eget ipsum. Maecenas quis lorem non enim condimentum dictum vel sed augue. Curabitur scelerisque ut lorem ac fringilla. Suspendisse a condimentum eros. Phasellus luctus ipsum non arcu eleifend consequat ac ut massa. Nunc sed tortor sed orci viverra luctus. Mauris rutrum quam id velit aliquet, sed vestibulum erat dictum. Donec adipiscing mauris at nunc interdum auctor. Sed venenatis dictum justo, in condimentum orci interdum id. Curabitur id dignissim mi. Praesent blandit ac eros in faucibus. Ut commodo euismod massa, quis aliquam tortor euismod volutpat. Suspendisse vehicula nulla in adipiscing vehicula. Vivamus dapibus tempus justo, sit amet suscipit ante.
</p>
<p>
Integer mauris turpis, pharetra feugiat nisi ac, mattis consectetur urna. Praesent condimentum venenatis lectus et aliquet. Maecenas id nunc quis augue eleifend fermentum molestie lacinia tellus. Pellentesque eleifend urna quis dui pretium feugiat. Nullam non quam nulla. Nulla in libero at turpis elementum sollicitudin non a justo. Nullam a arcu elementum, placerat elit in, posuere odio. Nam nisl ipsum, pretium vitae varius vitae, tempus non ligula.
</p>
<p>
Fusce at ullamcorper nibh. Nam quis sapien malesuada, porttitor lorem vel, dapibus mi. Ut lobortis tellus ut ultrices eleifend. Sed nec orci quis arcu pretium dictum. In nunc elit, ultricies in volutpat in, elementum eget lectus. Sed nec urna laoreet, bibendum odio quis, tincidunt lectus. Donec sagittis ultricies libero, et mollis magna.
</p>
<p>
Integer nisl urna, aliquam at dignissim id, vestibulum at tortor. Quisque aliquet risus eget augue ullamcorper, sit amet porttitor tellus vulputate. Vestibulum nisl sapien, malesuada quis mauris eu, fermentum egestas nisl. Maecenas scelerisque, eros in rutrum molestie, dui nibh fermentum sem, nec ultrices odio nisl et velit. Nunc a tincidunt nunc. Suspendisse potenti. Vestibulum in leo consequat, fringilla justo eu, rhoncus nibh. Praesent at justo sapien. Proin et tellus molestie, aliquam tellus at, imperdiet sapien. Proin id ante eget felis congue lobortis a ut lectus.
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque lacinia massa nec enim cursus, ac malesuada nibh dignissim. Nullam vel purus feugiat nulla sollicitudin molestie. Vivamus vel nisi ante. Vestibulum at dui dignissim, volutpat dui id, egestas dolor. Nullam ullamcorper mi vitae facilisis dapibus. Suspendisse id auctor lorem. Donec facilisis pulvinar ligula, a porta risus ultrices ac. Integer enim odio, interdum id pharetra non, adipiscing ac velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec felis tortor, tempus at rhoncus eu, tempor id dui. Sed ultricies sem nec ante luctus, in facilisis quam tempus. Aliquam mollis sollicitudin risus non mattis. Nunc semper viverra diam eu volutpat. Sed id neque scelerisque, vehicula libero nec, pulvinar eros. Donec nec nisi eu lectus cursus dapibus.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p>
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
</div></div>
<div id="prev">PREV</div>
<div id="next">NEXT</div>
<div id="infopage"></div>
</body>
</html>
解決方案3
0 2011-12-02 10:25:09
這對我有用。 http://jsfiddle.net/peduarte/LRWL8/
您是否將js包裝在$(document).ready() ？
解決方案4
0 2011-12-02 10:25:48
這是要使用的語法：
var div = document.getElementById(columnWrapper);
var width = div.css("width"),
var height = div.css("height");
CSS：動態寬度div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.