HTML / CSS內容/側邊欄對齊

Question

我正在嘗試創建一個具有內容div和側邊欄div的簡單網站，但是側邊欄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>

Answer 1

您需要查看希望並排放置的兩個div的寬度和高度。

我認為您的問題是，您沒有為要坐在邊欄旁邊的元素指定寬度/高度。 例如，如果您的頁面寬度為1000px，則將創建兩個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;
   }

HTML / CSS內容/側邊欄對齊

問題描述

1 個解決方案

解決方案1
0 2013-03-17 21:21:28

HTML / CSS內容/側邊欄對齊

問題描述

1 個解決方案

解決方案1 0 2013-03-17 21:21:28

解決方案1
0 2013-03-17 21:21:28