تدفق 2 أعمدة من النص تلقائيًا باستخدام CSS
https://stackoverflow.com/questions/3009670
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي الرمز المشابه لما يلي:
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
أرغب في ، بدون علامات تمييز إذا كان ذلك ممكنًا ، بتدفق هذا النص إلى عمودين (1-3 على اليسار ، 4-6 على اليمين). سبب ترددي في إضافة عمود باستخدام أ <div> هل يتم إدخال هذا النص من قبل العميل عبر محرر WYSIWYG ، لذلك من المحتمل أن يتم قتل أي عناصر حقنها لاحقًا أو غير مفهوم.
المحلول
باستخدام jQuery
قم بإنشاء عمود ثانٍ وانتقل عبر العناصر التي تحتاجها فيه.
<script type="text/javascript">
$(document).ready(function() {
var size = $("#data > p").size();
$(".Column1 > p").each(function(index){
if (index >= size/2){
$(this).appendTo("#Column2");
}
});
});
</script>
<div id="data" class="Column1" style="float:left;width:300px;">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!-- data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>
تحديث:
أو لأن الشرط الآن هو أن يكون لها الحجم على قدم المساواة. أود أن أقترح استخدام المكونات الإضافية JQuery المسبقة: Columnizer jQuery Plugin
نصائح أخرى
يستخدم CSS3
.container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
دعم المتصفح
- Chrome 4.0+ (
-webkit-) - أي 10.0+
- Firefox 2.0+ (
-moz-) - Safari 3.1+ (
-webkit-) - أوبرا 15.0+ (
-webkit-)
لا يمكن حاليًا عائمة عمودين بجوار بعضهما البعض فقط مع CSS/HTML. طريقتان لتحقيق ذلك:
الطريقة 1: عندما لا يكون هناك نص مستمر ، فقط الكثير من الفقرات غير المرتبطة:
تعويم جميع الفقرات إلى اليسار ، واعطهم نصف عرض العنصر المحتوي وضبط ارتفاع ثابت.
<div id="container">
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
</div>
#container { width: 600px; }
#container p { float: left; width: 300px; /* possibly also height: 300px; */ }
يمكنك أيضًا إدراج DIVs أوضح بين الفقرات لتجنب الاضطرار إلى استخدام ارتفاع ثابت. إن أردت اثنين الأعمدة ، أضف وضوحا بين الفقرتين واثنين. سيؤدي ذلك إلى مواءمة الجزء العلوي من الفقرتين التاليتين ، مما يجعلها تبدو أكثر ارتباطًا. مثال:
<div id="container">
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<div class="clear"></div>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<div class="clear"></div>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
</div>
/* in addition to the above CSS */
.clear { clear: both; height: 0; }
الطريقة 2: عندما يكون النص مستمرًا
أكثر تقدما ، ولكن يمكن القيام به.
<div id="container">
<div class="contentColumn">
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
</div>
<div class="contentColumn">
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
</div>
</div>
.contentColumn { width: 300px; float: left; }
#container { width: 600px; }
عندما يتعلق الأمر بسهولة الاستخدام: لا يوجد شيء من هذه العميل غير التقني. قد تحاول أن تشرح له/لها كيفية القيام بذلك بشكل صحيح ، وتخبره/لها لماذا. إن تعلم HTML أساسي للغاية ليس فكرة سيئة على أي حال ، إذا كان العميل سيقوم بتحديث صفحات الويب عبر محرر WYSIWYG في المستقبل.
أو يمكنك محاولة تنفيذ بعض حل JavaScript الذي يحسب العدد الإجمالي للفقرات ، ويقسمها إلى اثنين وإنشاء أعمدة. سيؤدي هذا أيضًا إلى تدهور برشاقة لأولئك الذين تعطيل JavaScript. الخيار الثالث هو أن يحدث كل هذا الانقسام إلى الأعمدة-خوادم Serverside إذا كان هذا خيارًا.
(الطريقة 3: وحدة تخطيط CSS3 متعددة العمود)
قد تقرأ عن طريقة CSS3 للقيام بذلك, ، لكنها ليست عملية حقًا لموقع الإنتاج. ليس بعد ، على الأقل.
فيما يلي مثال على فئة بسيطة من العمود:
.two-col {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
}
التي ستطبق عليها على كتلة من النص مثل:
<p class="two-col">Text</p>
ليس خبيرًا هنا ، لكن هذا ما فعلته وعمل
<html>
<style>
/*Style your div container, must specify height*/
.content {width:1000px; height:210px; margin:20px auto; font-size:16px;}
/*Style the p tag inside your div container with half the with of your container, and float left*/
.content p {width:490px; margin-right:10px; float:left;}
</style>
<body>
<!--Put your text inside a div with a class-->
<div class="content">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida laoreet lectus. Pellentesque ultrices consequat placerat. Etiam luctus euismod tempus. In sed eros dignissim tortor faucibus dapibus ut non neque. Ut ante odio, luctus eu pharetra vitae, consequat sit amet nunc. Aenean dolor felis, fringilla sagittis hendrerit vel, egestas eget eros. Mauris suscipit bibendum massa, nec mattis lorem dignissim sit amet. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dolor neque. Phasellus tellus odio, egestas ut blandit sed, egestas sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</body>
</html>
مرة واحدة النص داخل <p> وصلت العلامات إلى ارتفاع الحاوية div ، وسيقوم النص الآخر بتدفق إلى يمين الحاوية.
لقد قمت أدناه بإنشاء نهج ثابت وديناميكي في الفقرات العامي. الكود موثقة إلى حد كبير.
المقدمة
أدناه ، ستجد الطرق التالية لإنشاء الأعمدة:
- ثابت (عمودان)
- ديناميكي ث/ جافا سكريبت + CSS (العمود N)
- ديناميكي ث/ جافا سكريبت + CSS3 (الأعمدة N)
ثابت (عمودان)
هذا هو تخطيط عمود بسيط 2. مرتكز على جليني'س الجواب الأول.
$(document).ready(function () {
var columns = 2;
var size = $("#data > p").size();
var half = size / columns;
$(".col50 > p").each(function (index) {
if (index >= half) {
$(this).appendTo(".col50:eq(1)");
}
});
});.col50 {
display: inline-block;
vertical-align: top;
width: 48.2%;
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col50">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>
<div class="col50"></div>ديناميكي ث/ جافا سكريبت + CSS (العمود N)
مع هذا النهج ، اكتشفت بشكل أساسي ما إذا كانت الكتلة تحتاج إلى تحويل إلى أعمدة. التنسيق هو col-{n}. n هو عدد الأعمدة التي تريد إنشائها.
$(document).ready(function () {
splitByColumns('col-', 4);
});
function splitByColumns(prefix, gap) {
$('[class^="' + prefix + '"]').each(function(index, el) {
var me = $(this);
var count = me.attr("class").split(' ').filter(function(className) {
return className.indexOf(prefix) === 0;
}).reduce(function(result, value) {
return Math.max(parseInt(value.replace(prefix, '')), result);
}, 0);
var paragraphs = me.find('p').get();
me.empty(); // We now have a copy of the children, we can clear the element.
var size = paragraphs.length;
var percent = 1 / count;
var width = (percent * 100 - (gap / count || percent)).toFixed(2) + '%';
var limit = Math.round(size / count);
var incr = 0;
var gutter = gap / 2 + 'px';
for (var col = 0; col < count; col++) {
var colDiv = $('<div>').addClass('col').css({ width: width });
var css = {};
if (col > -1 && col < count -1) css['margin-right'] = gutter;
if (col > 0 && col < count) css['margin-left'] = gutter;
colDiv.css(css);
for (var line = 0; line < limit && incr < size; line++) {
colDiv.append(paragraphs[incr++]);
}
me.append(colDiv);
}
});
}.col {
display: inline-block;
vertical-align: top;
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-6">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>ديناميكي ث/ جافا سكريبت + CSS3 (الأعمدة N)
لقد تم اشتقاق هذا جليني'س الجواب الثاني. يستخدم column-count و column-gap قواعد CSS3.
$(document).ready(function () {
splitByColumns('col-', '4px');
});
function splitByColumns(prefix, gap) {
var vendors = [ '', '-moz', '-webkit-' ];
var getColumnCount = function(el) {
return el.attr("class").split(' ').filter(function(className) {
return className.indexOf(prefix) === 0;
}).reduce(function(result, value) {
return Math.max(parseInt(value.replace(prefix, '')), result);
}, 0);
}
$('[class^="' + prefix + '"]').each(function(index, el) {
var me = $(this);
var count = getColumnCount(me);
var css = {};
$.each(vendors, function(idx, vendor) {
css[vendor + 'column-count'] = count;
css[vendor + 'column-gap'] = gap;
});
me.css(css);
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-3">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>سيتم تقسيم هذا الحل إلى عمودين ويقسم نصف المحتوى في نصف سطر في الآخر.يأتي هذا في متناول اليد إذا كنت تعمل مع البيانات التي يتم تحميلها في العمود الأول ، وتريد أن تتدفق بشكل متساوٍ في كل مرة. :). يمكنك اللعب مع المبلغ الذي يتم وضعه في العقيد الأول. هذا سوف يعمل مع القوائم كذلك.
يتمتع.
<html>
<head>
<title>great script for dividing things into cols</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
var count=$('.firstcol span').length;
var selectedIndex =$('.firstcol span').eq(count/2-1);
var selectIndexafter=selectedIndex.nextAll();
if (count>1)
{
selectIndexafter.appendTo('.secondcol');
}
});
</script>
<style>
body{font-family:arial;}
.firstcol{float:left;padding-left:100px;}
.secondcol{float:left;color:blue;position:relative;top:-20;px;padding-left:100px;}
.secondcol h3 {font-size:18px;font-weight:normal;color:grey}
span{}
</style>
</head>
<body>
<div class="firstcol">
<span>1</span><br />
<span>2</span><br />
<span>3</span><br />
<span>4</span><br />
<span>5</span><br />
<span>6</span><br />
<span>7</span><br />
<span>8</span><br />
<span>9</span><br />
<span>10</span><br />
<!--<span>11</span><br />
<span>12</span><br />
<span>13</span><br />
<span>14</span><br />
<span>15</span><br />
<span>16</span><br />
<span>17</span><br />
<span>18</span><br />
<span>19</span><br />
<span>20</span><br />
<span>21</span><br />
<span>22</span><br />
<span>23</span><br />
<span>24</span><br />
<span>25</span><br />-->
</div>
<div class="secondcol">
</div>
</body>
</html>
ربما نسخة أكثر تشددا؟ تتمثل حالة الاستخدام الخاصة بي في إخراج تخصصات الكلية بالنظر إلى مجموعة JSON من التخصصات (البيانات).
var count_data = data.length;
$.each( data, function( index ){
var column = ( index < count_data/2 ) ? 1 : 2;
$("#column"+column).append(this.name+'<br/>');
});
<div id="majors_view" class="span12 pull-left">
<div class="row-fluid">
<div class="span5" id="column1"> </div>
<div class="span5 offset1" id="column2"> </div>
</div>
</div>
