Question

是否有可能将1 div分成2个单独的div，其中高度相等使用jQuery ？它的动态内容，所以我们不知道内容的确切高度。

首先找到外部div高度并除以2表示外部div高度（使用jQuery）
第二次插入两个子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仅包含统一文本。如果它包含样式元素或图像，则会变得更复杂。即使在统一文本的情况下，它也可能产生一个在这里或那里被一条线关闭的结果。此外，按空格分割可能会在中间剪切句子，这可能适合或不适合您的需要。

你可以通过以下方式使它更精细：

以更精细的方式分割您的文字。您甚至可以在单词的音节之间添加连字符 - 再次，根据您的需要。
寻找分裂的最佳位置。我认为二进制搜索单词的数量（或句子，或者你决定打破文本的任何内容）是最快，最简单的方法。我写了一个小例子here。另请参阅问题：How to get the real height of a text?。

如果您的问题没有回答，那么您需要更好地定义问题。

Answer 2

Gsk，你的问题非常模糊，但我认为你正在寻找专栏。检查CSS3以查找列http://www.w3schools.com/css/css3_multiple_columns.asp

我不是百分之百确定表格，但值得研究。

Answer 3

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;
}

Answer 4

在内部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 ..

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

4 个答案: