0

コンテンツ div とサイドバー div を使用して単純な Web サイトを作成しようとしていますが、サイドバー div がコンテンツ div の外側にあるものを押し下げています。これは簡単に修正できると思いますが、この正確なシナリオを探すのは困難でした。

ここで jsfiddle を作成しましたhttp://jsfiddle.net/WRs7L/。

<body>
  <div id="wrapper">
    <div id="main"> 
      <div id="sidebar"></div>  
      <div id="content">
        <div id="resume">
          <section id="employment" class="part">
            <h2>Employment</h2>
              <section class="item">
                <div class="info cf">
               <div class="left">
            <span class="title">Title</span>
            <span class="employer">Employer</span>
            <span class="group">Group</span>                
              </div>
              <div class="right">
            <span class="dates">Date</span>
            <span class="location">Location</span>              
              </div>       
                  <div style="clear: both;"></div>   
                </div> 
                <div class="content">
                 <ul>
                   <li>Item 1</li>
                   <li>Item 2</li>
                   <li>Item 3</li>
                 </ul>
               </div>
             </section>    
           </section>    
         </div>
       </div>
     </div>
   </div>
 </body>
4

1 に答える 1

0

並べて配置する 2 つの div の幅と高さを確認する必要があります。

問題は、サイドバーの隣に配置したい要素に幅/高さを指定していないことだと思います。たとえば、幅が 1000px のページがある場合、次のように 2 つの div を作成します。

<div id="side1"></div>
<div id="side2"></div>

次に、css を適用して、それらを並べて配置します。

#side1
  {
    width:49%;
    height:500px;
    float:left
    margin-right:1%;
    clear:none;
   }

 #side2   {
    width:50%;
    height:500px;
    float:left;
    clear:none;
   }
于 2013-03-17T21:21:28.000 に答える