如何将两个段落排列/对齐成方框

Question

  

可能重复：
  CSS styling - how to put these two div boxes adjacent

我要2段：

Para 1

Para 2

如何让它看起来像：

Para1   Para2

两者都在自己的空间和盒子里。

   <div>
  <div class="block" id="profile">
  <h3>Professional Profile</h3>
  <p>Knowledge in all aspects of web application development. 
  My Skills to solve programming errors gets the job
  faster. Proficient in performance tuning database applications.</p>
  </div>

我在这做什么？

  <div class="block" id ="contact">
  <p>
  <h3> Contact</h3>
  <address>Written by W3Schools.com<br /><a href="mailto:rjohn5854@howardcc.edu">
  Email Me!!!</a><br />Address: Box 3223,City<br />Phone:6750</address>
  <p>
  </div>
  </div>

CSS


  div.block p  {
      display: inline-block;    
        }

Answer 1

使用display: inline-block CSS property或类似内容：

p { display: inline-block; }

Demo

Answer 2

在你的css中：

.align-profile,
.align-contact
{
   display: inline-block;
   vertical-align: top; //also can try other align settings
   width: 45%;
}

.align-contact
{
   margin-left: 30px; //also try depending on the spacing you want between them
}

在你的HTML中：

<div class="align-profile">
   <h2>Profile</h2>
   para1
</div>
<div class="align-contact">
   <h2>Contact</h2>
   para2
</div>

注意div或段落必须对齐才能发生这种情况。如果你把一个div放在一个div或一个段落里面的段落中它将无法工作。

Answer 3

在HTML段落标记中

是块元素，因此它占据了父元素的所有宽度。如果您可以在一行中排列两个

块，则需要将块行为更改为内联。使用display: inline或display: inline-block即可。