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