-1

可能重复：
CSS 样式 - 如何将这两个 div 框相邻放置

我必须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;    
        }
4

3 回答 3

3

使用display: inline-blockCSS 属性或类似属性：

p { display: inline-block; }

演示

于 2012-09-14T18:45:27.093 回答
1

在你的 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 或将段落放入段落中，它将不起作用。

于 2012-09-14T18:50:06.347 回答
0

在 HTML 段落标签中

是块元素，所以它占据了父元素的所有宽度。如果你能安排两个

一行中的块，您需要将块行为更改为内联。使用display: inline或display: inline-block为它。

于 2012-09-14T18:49:32.257 回答