css div格式化和对齐

Question

如何对齐，使侧边栏和图片部分与主要内容区域并排，没有空格

JsFiddle

<div id="page-container">
    <div id="mainnavigationarea">
        <p>Main Navigation</p>
    </div>
    <div id="rosaheadersection">
        <p>Header</p>
    </div>
    <div id="rosapicturesection">
        <p>Picture Section</p>
    </div>
    <div id="rosachiefcontent">
        <p>Main Area. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
    </div>
    <div id="rosasidebar-a">
        <p>Sidebar.Sidebar,Sidebar, Sidebar SidebarSidebarSidebarSidebarSidebarSidebar</p>
    </div>
    <div id="rosafooter">
        <p>footer</p>
    </div>
</div>

Answer 1

您应将主要内容和侧边栏内容包装在自己的div容器中，并将该容器设置为float:left。要删除空格，您需要删除添加到margin标记的自然p。

<强> HTML

<div id="page-container">
   <div id="mainnavigationarea">
      <p>Main Navigation</p>
   </div>
   <div id="rosaheadersection">
      <p>SM Tool</p>
   </div>
   <div class="left-container">
      <div id="rosachiefcontent">
         <p>Main Area. This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. Main Area. This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. Main Area. This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other.</p>
      </div>
   </div>

   <div class="right-container">

      <div id="rosapicturesection">
         <p>Picture Section</p>
      </div>
      <div id="rosasidebar-a">
         <p>Sidebar.Sidebar,Sidebar, Sidebar SidebarSidebarSidebarSidebarSidebarSidebar</p>
      </div>
   </div>

   <div id="rosafooter">
      <p>footer</p>
   </div>        
</div>

<强> CSS

html,body{
    margin: 0;
    padding: 0;
}

p{
    margin: 0;
}

.left-container{
    float: left;
    width:980px;
}

.right-container{
    float: left;
    width: 280px;

}


#rosafooter {
    clear: both;
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 10px;
    color: #3e5667;
    border-top: 1px solid #efefef;
    padding: 13px 25px;
    line-height: 18px;
}
#mainnavigationarea {
    height: 150px;
    background: #999;
}
#rosaheadersection {
    height: 150px;
    background: #7ac0da;
}
#rosapicturesection {
    height: 150px;
    background: yellow;
    width: 280px;
}
#rosasidebar-a {
    width: 280px;
    background:#3e5667
}
#rosachiefcontent h2 {
    margin: 0;
    padding: 0;
}
#rosachiefcontent p {
    margin: 0;
    padding: 50px;
}
#rosachiefcontent {
    clear: both;
    overflow:auto;
    margin-right: 280px;
    background:#a6dbed;
    width:980px;
    vertical-align:top
}
#page-container {
    width: 1260px;
    margin: auto;
    background:#fff
}

FIDDLE