使用 jQuery 将 1 个 div 分成 2 个具有相同高度的独立 div？ [关闭]

Question

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

1. 首先找到外部 div 高度，然后除以 2 外部 div 高度（使用 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，我将两个内部div分割为50px（inner1）和50px（inner2）高度。

<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/>s。

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

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. 正在寻找最好的分割位置。我认为对单词（或句子，或您决定将文本分解成的任何内容）的数量进行二进制搜索是最快、最简单的方法。我写了一个小例子here。另请参阅问题：How to get the real height of a text?。

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

Answer 2

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

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

我不是 100% 确定这些表格，但值得研究一下。