перевести текст из одной колонки в другую
Можно ли как то яваскриптом перевести те параграфы которые не помещаются в первом блоке в последующий блок?
Помогите пожалуйста очень надо
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<style>
.block{
width:100px;
height:200px;
display:inline-block;
}
#one{
background:#eee;
overflow:hidden;
}
#two{
background:#ee9;
}
</style>
</head>
<body>
<div id="one" class="block">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div id="two" class="block">
</div>
</body>
<html>
|
Вообщето такое сразу надо делать на css. Попытка сделать это на js - тоже самое что и впихнуть невпихуемое.
Если твоему параграфу жестко задана высота, и известна высота блока, то элементарным подсчетом и и хардкодным циклом можно переносить параграфы для которых места нет в следующий блок. Если,как вероятно в твоем случае, еще и высота параграфов неизвестна, то это полное дерьмо а не код - в цикле надо перебирать каждый параграф,суммируя их высоту, и если сумма+след параграф > высота блока,переносить. |
imedia,
:)
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<script>
$(function () {
for (var a = document.querySelector("#one"), b = document.querySelector("#two"), c = a.querySelectorAll("p"), e = c.length, d;
(d = c[--e]) && !(a.scrollHeight <= a.clientHeight);) b.insertBefore(d, b.querySelector("p"))
});
</script>
<style>
.block{
width:100px;
height:200px;
display:inline-block;
}
#one{
background:#eee;
overflow:hidden;
}
#two{
background:#ee9;
}
</style>
</head>
<body>
<div id="one" class="block">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
</div>
<div id="two" class="block">
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:30. |