好的,我已经尽我所能使它正常工作,这是一个PHP / CSS问题。
我有12个高度不同的DIV。我想要做的是将两列由6列组成,其中底部的DIV与顶部对齐...这是我的示例:
.testimonial-padding {
padding: 2px;
width: 100px;
display: inline-block;
}
<div class="testimonial-padding">
<div class="sidebar_top">TITLE</div>
<div class="sidebar_bottom"> <em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
eu erat iaculis orci varius vehicula. Nullam vehicula tellus sit
amet lacus hendrerit, eget malesuada erat faucibus. Sed id nulla
non elit ultrices faucibus. Praesent accumsan leo in sem ornare
suscipit ac sed odio. Praesent placerat pharetra laoreet. In auctor
auctor vulputate. Integer nec tortor et diam faucibus fringilla.
Cras sed mattis dolor, vel dictum orci. Etiam accumsan eu velit
vel suscipit. Nam auctor nisl at sapien vulputate vulputate. Sed
eget mi ut erat consequat convallis. Donec sit amet mattis erat,
non ullamcorper lorem. Praesent ac quam elementum, scelerisque dolor
sit amet, dapibus sapien. Fusce sit amet tortor aliquet, eleifend
risus et, dignissim eros. Nunc ultricies sem at euismod dignissim.
In urna nibh, aliquam nec ornare eu, gravida ac lorem. Proin tellus
enim, tincidunt eget tincidunt et, ultricies sed libero. Sed quis
justo sed metus tincidunt convallis sed in lacus. Aliquam pharetra
consectetur metus ut semper. Vestibulum non imperdiet dolor, non
rhoncus enim. Cras nec massa ac ligula iaculis porta. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Mauris nec turpis fermentum, blandit turpis eget, gravida
massa. Nullam eu posuere orci. Praesent viverra malesuada accumsan.
Phasellus semper eu nisi at luctus. Nullam dignissim sed nunc vitae
porttitor. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Curabitur at sem vitae lacus
cursus varius. Duis blandit nisi commodo lacus volutpat, at eleifend
augue sodales. Nulla consectetur nunc nec imperdiet ultricies. Suspendisse
congue, eros non fringilla convallis, diam ante sodales ligula,
rhoncus mattis sem leo vel massa. Vivamus semper aliquet mi, ut
ultrices magna pellentesque et. Phasellus a ornare ipsum. Nullam
vel elit vitae nisi ullamcorper lobortis nec id purus. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Sed vel leo eget turpis egestas cursus vel ac quam. Curabitur
vulputate ut nulla id consectetur. Pellentesque quis adipiscing
dui. Duis porttitor dignissim condimentum. Aliquam erat volutpat.
Aliquam ornare neque ut ipsum rutrum, in bibendum dolor mollis.
Aliquam quam tellus, egestas in massa vel, consectetur posuere lacus.
Curabitur pretium porta ultrices. Cras nulla orci, fermentum fermentum
libero vel, bibendum scelerisque odio. Duis tristique lorem quis
tempor hendrerit. In hac habitasse platea dictumst. Pellentesque
malesuada, turpis sed accumsan vulputate, neque ante eleifend lorem,
a egestas purus elit vitae augue. Maecenas suscipit pellentesque
nunc vel lobortis. Vivamus a nisl volutpat, pulvinar quam in, malesuada
velit. Nam consequat consequat purus sit amet suscipit. In molestie
viverra mauris ut molestie. Proin consequat tincidunt sollicitudin.
Nam semper, lacus a aliquam interdum, sem quam suscipit ipsum, eu
ornare purus sem sit amet est. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Nulla ac libero dolor. Aliquam dolor lacus,
consectetur vitae hendrerit at, suscipit a odio. Aliquam eget felis
ut ante fermentum aliquet. Phasellus vitae elit facilisis, pulvinar
felis ac, varius felis."</em>
<br>
</div>
</div>
<div class="testimonial-padding">
<div class="sidebar_top">TITLE</div>
<div class="sidebar_bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum magna eget porttitor dictum. Fusce at mi dui. Pellentesque ultrices velit ac risus pretium adipiscing. Donec commodo sodales ornare. Maecenas sollicitudin libero eu varius tristique. Sed laoreet tristique magna in ultrices. Sed rutrum nibh quis sem gravida, sed vulputate nibh aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc non pulvinar erat, egestas mollis odio. Maecenas tortor risus, adipiscing sed libero ac, consequat varius felis. Nullam quis ante mauris. Etiam convallis congue dolor, et dapibus massa iaculis eu. Nulla ut arcu dui. Aenean mattis congue lacinia.
<br>
<br>Integer pretium convallis diam, vel volutpat tortor lobortis ut. Phasellus vel justo non felis posuere tristique sed vitae tellus. Duis nec urna in massa posuere posuere. Nullam risus nunc, rutrum ultricies placerat id, vehicula vel lacus. Praesent accumsan a lectus et consectetur. Sed ultrices nulla ut pulvinar rhoncus. Pellentesque at dapibus lorem. Cras libero augue, aliquam ac velit a, luctus ultricies urna. Nam nec massa consectetur, fringilla odio non, tempor enim. Donec eleifend lacinia odio, nec venenatis risus gravida vitae. Donec ut neque non sem convallis porttitor. Maecenas ultricies sollicitudin enim, commodo facilisis purus accumsan ac. Vivamus non ultrices leo.
<br>
<br>Vestibulum sit amet mollis neque. In tincidunt lacus quis consectetur auctor. Etiam at porta massa. Aenean ipsum nisl, mattis at enim eu, molestie vulputate arcu. Mauris feugiat urna vitae vulputate volutpat. Ut sagittis justo turpis, et bibendum risus volutpat quis. Phasellus sed ante semper, imperdiet purus vitae, fringilla arcu.</div>
</div>
<div class="testimonial-padding">
<div class="sidebar_top">TITLE</div>
<div class="sidebar_bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum magna eget porttitor dictum. Fusce at mi dui. Pellentesque ultrices velit ac risus pretium adipiscing. Donec commodo sodales ornare. Maecenas sollicitudin libero eu varius tristique. Sed laoreet tristique magna in ultrices. Sed rutrum nibh quis sem gravida, sed vulputate nibh aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc non pulvinar erat, egestas mollis odio. Maecenas tortor risus, adipiscing sed libero ac, consequat varius felis. Nullam quis ante mauris. Etiam convallis congue dolor, et dapibus massa iaculis eu. Nulla ut arcu dui. Aenean mattis congue lacinia.
<br>
<br>Integer pretium convallis diam, vel volutpat tortor lobortis ut. Phasellus vel justo non felis posuere tristique sed vitae tellus. Duis nec urna in massa posuere posuere. Nullam risus nunc, rutrum ultricies placerat id, vehicula vel lacus. Praesent accumsan a lectus et consectetur. Sed ultrices nulla ut pulvinar rhoncus. Pellentesque at dapibus lorem. Cras libero augue, aliquam ac velit a, luctus ultricies urna. Nam nec massa consectetur, fringilla odio non, tempor enim. Donec eleifend lacinia odio, nec venenatis risus gravida vitae. Donec ut neque non sem convallis porttitor. Maecenas ultricies sollicitudin enim, commodo facilisis purus accumsan ac. Vivamus non ultrices leo.
<br>
<br>Vestibulum sit amet mollis neque. In tincidunt lacus quis consectetur auctor. Etiam at porta massa. Aenean ipsum nisl, mattis at enim eu, molestie vulputate arcu. Mauris feugiat urna vitae vulputate volutpat. Ut sagittis justo turpis, et bibendum risus volutpat quis. Phasellus sed ante semper, imperdiet purus vitae, fringilla arcu.</div>
</div>
<div class="testimonial-padding">
<div class="sidebar_top">TITLE</div>
<div class="sidebar_bottom"> <em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
eu erat iaculis orci varius vehicula. Nullam vehicula tellus sit
amet lacus hendrerit, eget malesuada erat faucibus. Sed id nulla
non elit ultrices faucibus. Praesent accumsan leo in sem ornare
suscipit ac sed odio. Praesent placerat pharetra laoreet. In auctor
auctor vulputate. Integer nec tortor et diam faucibus fringilla.
Cras sed mattis dolor, vel dictum orci. Etiam accumsan eu velit
vel suscipit. Nam auctor nisl at sapien vulputate vulputate. Sed
eget mi ut erat consequat convallis. Donec sit amet mattis erat,
non ullamcorper lorem. Praesent ac quam elementum, scelerisque dolor
sit amet, dapibus sapien. Fusce sit amet tortor aliquet, eleifend
risus et, dignissim eros. Nunc ultricies sem at euismod dignissim.
In urna nibh, aliquam nec ornare eu, gravida ac lorem. Proin tellus
enim, tincidunt eget tincidunt et, ultricies sed libero. Sed quis
justo sed metus tincidunt convallis sed in lacus. Aliquam pharetra
consectetur metus ut semper. Vestibulum non imperdiet dolor, non
rhoncus enim. Cras nec massa ac ligula iaculis porta. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Mauris nec turpis fermentum, blandit turpis eget, gravida
massa. Nullam eu posuere orci. Praesent viverra malesuada accumsan.
Phasellus semper eu nisi at luctus. Nullam dignissim sed nunc vitae
porttitor. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Curabitur at sem vitae lacus
cursus varius. Duis blandit nisi commodo lacus volutpat, at eleifend
augue sodales. Nulla consectetur nunc nec imperdiet ultricies. Suspendisse
congue, eros non fringilla convallis, diam ante sodales ligula,
rhoncus mattis sem leo vel massa. Vivamus semper aliquet mi, ut
ultrices magna pellentesque et. Phasellus a ornare ipsum. Nullam
vel elit vitae nisi ullamcorper lobortis nec id purus. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Sed vel leo eget turpis egestas cursus vel ac quam. Curabitur
vulputate ut nulla id consectetur. Pellentesque quis adipiscing
dui. Duis porttitor dignissim condimentum. Aliquam erat volutpat.
Aliquam ornare neque ut ipsum rutrum, in bibendum dolor mollis.
Aliquam quam tellus, egestas in massa vel, consectetur posuere lacus.
Curabitur pretium porta ultrices. Cras nulla orci, fermentum fermentum
libero vel, bibendum scelerisque odio. Duis tristique lorem quis
tempor hendrerit. In hac habitasse platea dictumst. Pellentesque
malesuada, turpis sed accumsan vulputate, neque ante eleifend lorem,
a egestas purus elit vitae augue. Maecenas suscipit pellentesque
nunc vel lobortis. Vivamus a nisl volutpat, pulvinar quam in, malesuada
velit. Nam consequat consequat purus sit amet suscipit. In molestie
viverra mauris ut molestie. Proin consequat tincidunt sollicitudin.
Nam semper, lacus a aliquam interdum, sem quam suscipit ipsum, eu
ornare purus sem sit amet est. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Nulla ac libero dolor. Aliquam dolor lacus,
consectetur vitae hendrerit at, suscipit a odio. Aliquam eget felis
ut ante fermentum aliquet. Phasellus vitae elit facilisis, pulvinar
felis ac, varius felis."</em>
我还没有添加任何样式,但是如果将其放在编辑器中,将会看到我在说什么。下一个的底部与前一个的顶部不对齐。
任何人都对如何实现这一目标有任何想法?我知道在“ padder”上的CSS缺少一些东西。
** 更新 **
我已经对此进行了研究,搜索了Google和其他搜索引擎,但没有发现任何可以解决此问题的方法,它已经进行了大约2周。
我知道这可能不是大多数人想要做的,但最简单的方法是利用table元素。因为这会使所有行都水平对齐,这就是我假设您要尝试的如果我理解正确的话,可以在这里完成。
<table border="0">
<tr style="vertical-align:top;">
<td>
<h1>Title</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td>
<h1>Title</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
<br />
</td>
</tr>
<tr style="vertical-align:top;">
<td>
<h1>Title</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td>
<h1>Title</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</th>
</td>
</tr>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句