HTML / CSS内容/侧边栏对齐

Question

I am trying to create a simple website with a content div and a sidebar div but the sidebar div is pushing somethings down in my content div, even though its outside. 我正在尝试创建一个具有内容div和侧边栏div的简单网站，但是侧边栏div在我的内容div中向下推了一些内容，即使它位于外部。 I believe this is an easy fix, but it has been hard to search for this exact scenario. 我相信这是一个简单的解决方法，但是很难找到这种确切的情况。

I created a jsfiddle here, http://jsfiddle.net/WRs7L/ . 我在这里创建了一个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

You need to look at the width and heights of the two divs you wish to sit side by side. 您需要查看希望并排放置的两个div的宽度和高度。

I think you problem is that you arn't specifying widths/heights to the element which you want to sit next to the sidebar. 我认为您的问题是，您没有为要坐在边栏旁边的元素指定宽度/高度。 For instance if you have a page which is 1000px in width, you would create two divs eg 例如，如果您的页面宽度为1000px，则将创建两个div，例如

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

Then apply the css to make them sit side by side: 然后应用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