HTML/CSS 内容/边栏对齐

标签 html css

我正在尝试创建一个包含内容 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>

最佳答案

您需要查看您希望并排放置的两个 div 的宽度和高度。

我认为你的问题是你没有为你想放在边栏旁边的元素指定宽度/高度。 例如,如果您有一个宽度为 1000 像素的页面,您将创建两个 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 内容/边栏对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15466203/

相关文章:

Javascript Android Mozilla 无法在新选项卡中打开页面

java - 在 UI 端处理 ResponseEntity 的最佳方法是什么?

javascript - 动态加载的 div 的事件名称

javascript - 如何在 ajax 成功时获取 TreeView 中的复选框计数值?

javascript - 单击嵌套的 Bootstrap Dropdown <li> 时防止滚动

javascript - 当我在一个页面中有多个表单时,如何在单击提交按钮后获取特定表单的控件

javascript - 悬停时如何更改 anchor 文本颜色?

javascript - 用红色标记一列中的 0 号

javascript - 在 Safari IOS12 上禁用双击缩放/调整大小***

html - 如何使用Google Docs作为网站后端?