html - 如何使用CSS并排对齐p标签？

Question

我目前在并排对齐 div 中的 p 标签时遇到问题，这是我的代码:-

<div class="div_right">
<div style="background-color: #EEEEF1; width:300px; padding:20px 30px;">
<p><img class="_51sw img" alt="" src="https://www.facebook.com/images/profile/timeline/app_icons/info_24.png" alt="SJT" title="SJT"> About <?php echo $name; ?></p><hr>
<p style="font-weight:bold;">Tagline</p>
<?php echo $tagline; ?>
<p style="font-weight:bold;">School</p>
<?php echo $school; ?>
<p style="font-weight:bold;">Core Commitee Member</p>
<?php echo $member; ?>
<p style="font-weight:bold;">Bragging Rights/Achievements</p>
<?php echo $brag; ?>

</div>

但我想将标语和学校并排放在一栏中，并在其正下方的另一栏中将核心委员会和吹牛的权利并排放置，但我不知道该怎么做。

Answer 1

您可以简单地使用 display:table-cell 来实现它和你所有的<p>元素:

p {
    display: table-cell;
}

<div style="background-color: #EEEEF1; width:3000px; padding:20px 30px;">
<p><img class="_51sw img" alt="" src="https://www.facebook.com/images/profile/timeline/app_icons/info_24.png" alt="SJT" title="SJT"> About <?php echo $name; ?></p><hr>
<p style="font-weight:bold;">Tagline</p>
<?php echo $tagline; ?>
<p style="font-weight:bold;">School</p>
<?php echo $school; ?>
<p style="font-weight:bold;">Core Commitee Member</p>
<?php echo $member; ?>
<p style="font-weight:bold;">Bragging Rights/Achievements</p>
<?php echo $brag; ?>

</div>