Question

我有2个div（我并排放置）包含段落（每个约5个）。我想让段落水平并排排列。我的意思是我希望第一个div中的第2段与第二个div中的第2段相同（对于所有其他段落也是如此）。我尝试使用jquery ui的位置函数，因为我已经在我的项目中使用了它的滑块（https://jqueryui.com/position/）但是当我的一个段落太长并且没有在窗口屏幕中显示时它没有对齐它适当地与其相应的段落。这是我的html（顺便说一下，我想避免使用表格，因为我必须在以后定期替换我的段落，如果它被分解太多，很难通过我的.js文件更改文本）：

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

编辑：为了澄清，div中的段落长度各不相同，这正是我的同线对齐问题的起源。

Answer 1

你的HTML代码是否必须完全相同，你只想用css / javascript实现它，或者我们可以稍微更改一下HTML吗？

p {
  display: inline-block;
}

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

Answer 2

重新构建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>

如果要选择特定列和子段的等效项，javascript将如下所示：

// Equivalent to Selecting #column-1
var col1 = document.querySelectorAll(".column-1");

// Equivalent to Selecting a Specific Paragraph
var col1_par1 = document.querySelector(".row:nth-child(1) .column-1"),
    col1_par2 = document.querySelector(".row:nth-child(2) .column-1");

// Make Text of Paragraph 3 in Column 1 red
document.querySelector(".row:nth-child(3) .column-1").style.setProperty("color", "red")

Answer 3

这是我与小提琴的解决方案：

Offers

基本上我只是在每个元素上使用css w / inline块并使用y轴隐藏溢出。很简单。

https://jsfiddle.net/Nicholas9114/xL73hqr2/13/

Answer 4

我尝试使用Javascript，它似乎做你想要的，我的意思是差不多（没有完全响应）。但是，我给你留下了这个有趣的解决方案。它基于DOM和节点。您必须检索p之类的元素节点，column1和column2的子节点并进行比较。如果你要求column1的所有子节点作为例子，你将获取p标签和文本节点，因为p是一个包含另一个节点的节点，一个文本节点。这里有趣的是p元素的高度。所以我从第1列和第2列中获取了所有子节点，并根据列将所有p元素放在单独的数组中。

为了完成，在for循环中，我比较每个数组的p元素。例如，如果column1中的paragraph2的高度比column2中的paragraph2高，则column2中的paragraph2的高度将等于column1中的paragraph2。

// 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');
 }
}

// CSS：

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 font-size: 0.9em;
}

p {
 height: auto;
}

#container {
 width: 80%;
 margin: 0 auto;
}

#column_1 {
 background-color: orange;
}

#column_2 {
 background-color: red;
}

#column_1 p,
#column_2 p {
 background-color: pink;
}

section {
 display: block;
 width: 100%;
 background-color: blue;
}

.contentM {
 width: 47.389558232932%; /* 472 / 996 */
 margin: 0 1.305220883534%; /* 13 / 996 */
 display: inline-block;
 float: left;
}


/* under a screen size of 640 px, a css rule overwrite the javascript calculation : */

@media screen and (max-width: 640px) {
 .container {
  width: auto !important;
  margin: 0 13px;
 }
 .contentL,
 .contentM,
 .contentS {
  width: 100% !important;
  margin: 0 0 13px 0 !important;
 }
 p {
  height: auto !important;
 }
}

@media screen and (max-width: 768px) {
  .container {
   width: 90%;
  }
}

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

另一个解决方案正在使用flexbox。它可能是一个更好的解决方案，因为维护代码更干净，更少混淆，现在它得到了浏览器的良好支持。

我必须更改HTML doc的结构才能实现它。

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

// CSS：

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

// JS：

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

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

////////

通过等待，@ Noot，你说你能够通过flex实现这一目标。是不是没有改变HTML文档的结构？你能分享你的结果吗？

如何在不同的div / span中水平对齐段落？

4 个答案: