我似乎没有像我想要的那样定位div。我的HTML的基本结构是
Header
main{
nav// top strip
#leftContain //left half-bar
#rigthContain //right half-bar:**this one spills out**
}
footer
这是HTML减去CSS链接（不是相关的，我在这里保持内联的相关）并减去HTML标签/ metatag / head标签/ javascript标签）此外，图像引用没有任何区别所以我也忽略了那些
<body>
<header style="width:1020px;margin:0 auto">
<h1>Company logo</h1>
</header>
<main id="wrapper" style="width:1020px;margin:0 auto">
<nav style=" line-height:30px; background-color:#ff0000;height:30px;width:100%;">
<p style="font-family: '21st Century', fantasy">
<a href="">products + Solutions</a>
<a href="">Services</a>
<a href="">industries</a>
<a href="">resources</a>
<a href="">company</a>
<a href="">investors</a>
<a href="">Careers</a>
</p>
</nav>
<div id="leftContain" style="width:500px">
<section id="headContent">
<p style="color:red;font-size:44px;margin-top:17px;margin-bottom:10px;line-height: 110%;">See how our engineer perfectly matched their DNA
</p>
<p style="margin-top:2px;line-height: 120%;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>
</section>
<hr>
<section class="picTile" style="width:550px;height:170px;overflow:hidden">
<img src="assets/images/item1.jpg" style="width:250px;float:left">
<div style="width:250px;float:left">
<p style="margin-top:0;margin-left:4px;line-height: 90%;line-height: 120%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
</p>
</div>
</section>
<hr>
<section class="picTile" style="width:550px;height:170px;overflow:hidden">
<img src="assets/images/item2.jpg" style="width:250px;float:left">
<div style="width:250px;float:left">
<p style="margin-top:0;margin-left:4px;line-height: 120%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
</p>
</div>
</section>
<hr>
<section class="picTile" style="width:550px;height:170px;margin-bottom:10px;overflow:hidden">
<img src="assets/images/item3.jpg" style="width:250px;float:left">
<div style="width:250px;float:left">
<p style="margin-top:0;margin-left:4px;line-height: 120%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
</p>
</div>
</section>
<hr>
</div>
<div id="RightContain" style="width:500px;float:left" >
<section id="banner;" style="float:left;width:200px">
#banner
<img src="assets/images/dr_left_slideshow.svg">
</section>
<section id="contactForm">
</section>
</div>
</main>
<footer style=" position:relative;bottom:0;width:100%;height:60px;">
<p>Privacy policy +terms of use | C 2014</p>
</footer>
</body>
我希望＃rightContain和#leftContain div彼此相对，但它不会发生，＃rightContain从包装主div中滑出并转到屏幕底部
答案 0 :(得分：1)
有几种方法可以做到这一点，但我认为你正在寻找的那个方法是用{c}包含左右包含div：
{display:table;width:100%;table-layout:fixed;}
然后将以下css添加到右侧和左侧包含：
{display:table-cell;vertical-align:top;width:100%;}
这将为两个div提供相同的宽度，并使它们保持相同的高度，并且无论页面宽度如何，它们也会并排放置。
答案 1 :(得分：0)
尝试将float: left;添加到leftContain。