【问题讨论】：
标签： javascript html css
https://jsfiddle.net/1L5emghf/
CSS：
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
这是解决您问题的方法吗？如果你想对底层元素具有相同的高度，请使用 JS（你需要给兄弟元素一个相对于活动元素的最小高度）
完整的 JS 解决方案
https://jsfiddle.net/1L5emghf/1/
HTML：
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
<p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
<p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
<p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
<p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
<p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
</div>
JS：
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}
【讨论】：
由于所有段落都使用相对位置，您可以为它们设置 max-width / overflow-y 样式：
CSS
p { max-height: 154px; overflow-y: scroll; }
内联样式
<p styles= "max-height: 154px; overflow-y: scroll; <....>" > mmmmmmmmm </p>
如果段落宽度也受到影响，请添加 max-width: 483px; overflow-x: hidden; 属性
【讨论】：