Javascript 如何在单独的div/span中水平对齐段落？

我有两个div（并排放置）包含段落（每个段落大约5个）。我希望段落水平并排对齐。我的意思是，我希望第一部分的第2段与第二部分的第2段在同一行开始（所有其他段落也是如此）。我尝试使用jqueryui的position函数，因为我已经在我的项目上使用了它的slider（），但是当我的一个段落太长并且没有显示在窗口屏幕上时，它没有正确地将它与相应的段落对齐。这是我的html（顺便说一句，我想避免使用表格，因为我以后必须定期替换我的段落，如果我的.js文件分解得太多，那么很难通过它更改文本）：

第1款

第2款

第3款

第4段

第1款

第2款

第3款

第4段

---

编辑：为了澄清，div中的段落长度不一，这就是我的同一行对齐问题的根源。

您的HTML代码必须完全相同，您只是想用css/javascript实现它，还是我们可以像下面这样稍微更改HTML

p{
显示：内联块；
}

第1款

第1款

第2款

第2款

第3款

第3款

第4段

第4段

重新构造HTML以获得相同的效果可能是值得的。我在下面做了这些，并提供了JavaScript示例，说明如何以您可能需要的方式访问这些段落

使用此设置，如果第1列中的第1段比第2列中的第1段长，则由于父行div的放大，第2列的大小将调整为适当的大小

一些CSS

#container {
    margin: 0 auto;
    width: 100%;
}
#container .row {
    /* Access rows */
}
#container .row .col {
    float: left;
    width: 50%;
}
/* Equivalent of #column-1*/
#container .row .col.column-1 {

}
/* Equivalent of #column-2 */
#container .row .col.column-2 {

}

还有HTML

<div id="container">
    <div class="row">
        <p class="col column-1">PARAGRAPH 1</p>
        <p class="col column-2">PARAGRAPH 1</p>
    </div>
    <div class="row">
        <p class="col column-1">PARAGRAPH 2</p>
        <p class="col column-2">PARAGRAPH 2</p>
    </div>
    <div class="row">
        <p class="col column-1">PARAGRAPH 3</p>
        <p class="col column-2">PARAGRAPH 3</p>
    </div>
    <div class="row">
        <p class="col column-1">PARAGRAPH 4</p>
        <p class="col column-2">PARAGRAPH 4</p>
    </div>
</div>

---

以下是我的解决方案，包括小提琴：

    <div id='holder'>
      <div id='one'>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
      </div>

      <div id='two'>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
        <p>Fooo fooo foooo lorem lorem lorem</p>
      </div>
    </div>

#holder {
  overflow: none;
}

#one{
  display: inline-block;
  background-color: #eee;
  width: 150px;
  height: 300px;
  margin: 5px;
  overflow: hidden;
  overflow-y: scroll;
}

#two{
  display: inline-block;
  background-color: #eee;
  width: 150px;
  height: 300px;
  margin: 5px;
  overflow: hidden;
  overflow-y: scroll;
}

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

Fooo Fooo lorem lorem lorem

#持有者{
溢出：无；
}
#一个{
显示：内联块；
背景色：#eee；
宽度：150px；
高度：300px；
保证金：5px；
溢出：隐藏；
溢出y：滚动；
}
#两个{
显示：内联块；
背景色：#eee；
宽度：150px；
高度：300px；
保证金：5px；
溢出：隐藏；
溢出y：滚动；
}

本质上，我只是在每个元素上使用cssw/inline块，并使用y轴滚动隐藏溢出。很简单

---

我用Javascript做了一些尝试，它似乎可以做你想做的事情，我的意思是几乎（没有完全响应）。然而，我给你们留下了一个有趣的解决方案。它基于DOM和节点。您必须检索元素节点，如p、column1和column2的子节点，并对它们进行比较。 例如，如果您询问column1的所有子节点，您将获取p标记和文本节点，因为p是一个包含另一个节点（文本节点）的节点。这里有趣的是p元素的高度。 因此，我从column1和Column2中获取所有子节点，并根据列将所有p元素放在单独的数组中

为了完成，在For循环中，我比较每个数组的p元素。例如，如果第1列中第2段的高度大于第2列中第2段的高度，则第2列中第2段的高度将等于第1列中第2段的高度

//JS:

var col1 = document.getElementById('column_1');
var col1Children = col1.childNodes;

var col2 = document.getElementById('column_2');
var col2Children = col2.childNodes;

var col1Child_p = [];
var col2Child_p = [];
var col1ChildTextNode = [];
var col2ChildTextNode = [];

col1.classList.add('contentM'); 
col2.classList.add('contentM');

for(var a = 0; a < col1Children.length; a++){
 if(col1Children[a].nodeType === 1){ // if child is an element node (like p)
    col1Child_p.push(col1Children[a]); //receipt element node (p)
 } else {
    col1ChildTextNode.push(col1Children[a]); // receipt text node (#text)
 }
}

for(var b = 0; b < col2Children.length; b++){
 if(col2Children[b].nodeType === 1){
  col2Child_p.push(col2Children[b]);
 } else{
  col1ChildTextNode.push(col2Children[b]); 
 }
}

for (var i = 0; i < 4; i++) {
 var col1ChildHeight = col1Child_p[i].clientHeight;
 var col2ChildHeight = col2Child_p[i].clientHeight;

if (col1Child_p[i].clientHeight > col2Child_p[i].clientHeight) {
   col2Child_p[i].style.height = col1ChildHeight + 'px';
 } else if (col1Child_p[i].clientHeight < col2Child_p[i].clientHeight{
   col1Child_p[i].style.height = col2ChildHeight + 'px';
 } else {
   console.log('not working - already the same height');
 }
}

var col = document.getElementById('column');
var rowDiv = document.querySelectorAll('#column > div');

for(var i = 0; i < rowDiv.length; i++){
 rowDiv[i].classList.add('row');
}

/////////////

另一个解决方案是使用flexbox。这可能是一个更好的解决方案，因为维护代码更干净，更少混乱，而且现在浏览器很好地支持它

我不得不改变你的HTML文档的结构来实现它

//HTML:

<body>
 <div id="container">
  <section>
   <article id="column" class="contentM"> 
    <div>
     <p>PARAGRAPH 1 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
     <p>PARAGRAPH 1 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
    </div>
    <div>
     <p>PARAGRAPH 2 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena. It applies mathematics, physics, and chemistry, in an effort to explain the origin of those objects and phenomena and their evolution.</p>
     <p>PARAGRAPH 2 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
    </div>
    <div>
     <p>PARAGRAPH 3 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>  
     <p>PARAGRAPH 2 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
    </div>
    <div>
     <p>PARAGRAPH 4 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
     <p>PARAGRAPH 4 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena.</p>
    </div>
  </article>
</section>

//JS:

var col1 = document.getElementById('column_1');
var col1Children = col1.childNodes;

var col2 = document.getElementById('column_2');
var col2Children = col2.childNodes;

var col1Child_p = [];
var col2Child_p = [];
var col1ChildTextNode = [];
var col2ChildTextNode = [];

col1.classList.add('contentM'); 
col2.classList.add('contentM');

for(var a = 0; a < col1Children.length; a++){
 if(col1Children[a].nodeType === 1){ // if child is an element node (like p)
    col1Child_p.push(col1Children[a]); //receipt element node (p)
 } else {
    col1ChildTextNode.push(col1Children[a]); // receipt text node (#text)
 }
}

for(var b = 0; b < col2Children.length; b++){
 if(col2Children[b].nodeType === 1){
  col2Child_p.push(col2Children[b]);
 } else{
  col1ChildTextNode.push(col2Children[b]); 
 }
}

for (var i = 0; i < 4; i++) {
 var col1ChildHeight = col1Child_p[i].clientHeight;
 var col2ChildHeight = col2Child_p[i].clientHeight;

if (col1Child_p[i].clientHeight > col2Child_p[i].clientHeight) {
   col2Child_p[i].style.height = col1ChildHeight + 'px';
 } else if (col1Child_p[i].clientHeight < col2Child_p[i].clientHeight{
   col1Child_p[i].style.height = col2ChildHeight + 'px';
 } else {
   console.log('not working - already the same height');
 }
}

var col = document.getElementById('column');
var rowDiv = document.querySelectorAll('#column > div');

for(var i = 0; i < rowDiv.length; i++){
 rowDiv[i].classList.add('row');
}

var col=document.getElementById（'column'）；
var rowDiv=document.querySelectorAll（“#column>div”）；
对于（变量i=0；i

////////

---

等等，@Noot，你说过你可以用flex实现这一点。它是否不改变HTML文档的结构？您可以分享您的结果吗？

您可以随时使用Bootstrap之类的布局管理器。这使得创建列和行变得容易。如果没有人对你的问题有一个可行的解决方案，你可以考虑一下：<代码>我想避免使用一个表，因为我必须在以后定期替换我的段落，如果它被破坏过多，将很难通过我的.js文件来改变文本。我不确定我是否理解你的意思。@ajax992谢谢你的建议！我会调查的。所以你想把第一段的两个放在第一行，第二段的两个放在第二行，依此类推？@Pat嗨，Pat，解释得有点长。我的项目涉及替换两个div中的段落，具体取决于用户在我的滑块上选择的选项（我在单独的javascript文件中这样做）。如果我把每个段落放在一个表格单元格中，那么当我必须在javascript文件中替换它时，它将花费更长的时间。我觉得有一个更有效的解决方案，我可以找到哈哈。谢谢你的回复！但是，我无法让您的代码在更长的段落中工作。但我会调查的。还要回答你的问题

p {
 width: 100%;
 margin: 5px 5px;
 background-color: orange;
}

container {
 width: 80%;
}

section {
 width: 100%;
}

article {
 margin: 5px 5px;
 background-color: red;
 float: left;
}

.contentM {
 width: 48%;
}

.row {
 display: flex;
}

var col = document.getElementById('column');
var rowDiv = document.querySelectorAll('#column > div');

for(var i = 0; i < rowDiv.length; i++){
 rowDiv[i].classList.add('row');
}