1 div 分成 2 个高度相等的独立 div 使用 jQuery？

Question

使用jQuery是否可以将一个div分成两个相等高度的独立div？它的内容是动态的，所以我们不知道内容的确切高度。

1. 首先找到外部div高度，然后除以外部div高度的2（使用jQuery）
2. 第二个插入两个子div和外部div（使用jQuery）

我已经尝试过下面的代码：（它的单词计数方法，但现在我需要内容高度方法）

<script type="text/javascript">
$(document).ready(function() {
  $("#mydiv").each(function(div) {
   var div_height = $(this).text().split(' ');       
   var out = [];
    for (var i = 0; i < div_height.length; i += 105) {     
    out.push('<div class="wrapper">' + div_height.slice(i, i+105).join(' ') + '</div>' + '<br>');
    } 
   $(this).html(out.join(' '));
  });
});
</script>

示例：如果外部div的高度是100px，我将用50px（inner1）和50px（inner2）的高度划分两个内部div。

<div id="outer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

至

<div id="outer">
  <div id="inner1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    
  <div id="inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

我想你想问的是——如何在元素中分割文本以适应特定的高度。可以使用它来获取<div/>中的文本并将其拆分为两个<div/>。

简单的答案是-将文本拆分到中间，例如

var outer = $('outer');
var words = outer.text().split(' ');
outer.empty();
var inner1 = $('<div/>').addClass('inner').appendTo(outer);
var inner2 = $('<div/>').addClass('inner').appendTo(outer);
var middle = parseInt(words.length/2);
inner1.text(words.slice(0, middle).join(' '));
inner2.text(words.slice(middle));

请注意，这假设outer仅包含统一文本。如果它包含样式元素或图像，则会变得更加复杂。即使在统一文本的情况下，它也可能产生一个在这里或那里偏离一行的结果。此外，按空格拆分可能会在中间截断句子，这可能适合也可能不适合你的需求。

您可以通过以下方式使其更精细：

1. 以更精细的方式拆分文本。你甚至可以根据自己的需要，在单词的音节之间添加连字符
2. 寻找最好的分手地点。我认为二进制搜索单词（或句子，或你决定将文本分解成的任何内容）的数量是最快、最简单的方法。我在这里写了一个小例子。另请参阅以下问题：如何获得文本的实际高度

如果这不能回答你的问题，你需要更好地定义你的问题。

Answer 2

Gsk，您的问题很模糊，但我认为您正在寻找列。检查CSS3中的列http://www.w3schools.com/css/css3_multiple_columns.asp

我不能百分之百肯定这些表格，但它值得一看。

Answer 3

在内部div 上使用类而不是ID

    <style type = "text/css" >
    #outer{
    height:100%;
    min-height:set whatever you want.;
    }
    .inner{
     height: 50px;
    }
    </style>
    <div id = "outer">
    <div class = "inner"></div>
    <div class = "inner"></div>
    </div>

因为内部div具有相同的格式，所以只使用class而不是id。

Answer 4

HTML:

<div id="outer">
    <div id="inner1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>    
    <div id="inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

CSS：

#outer  {
    height: auto;
    padding: 0px:
}
#inner1  {
    margin: 0px;
}
#inner2  {
    margin: 0px;
}