Question

我创建了一个非常简单的网页布局，可以在这里看到：http://s361608839.websitehome.co.uk/greengold/www/index.html如你所见，似乎有问题。 div #rightcol似乎被左侧的顶部div向下推（#leftcolbanner）。

#leftcolbanner的CSS是：

#leftcolbanner{
width: 707px;
height: 266px;
float: left;
background: url(../images/banner_home.gif) no-repeat;
margin: 20px 0 20px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #e1dbce;
}

和#rightcol：

#rightcol{
width: 190px;
background: #f4f2ec url(../images/bg_rightcol.gif) no-repeat right bottom;
float: right;
min-height: 550px;
padding: 25px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
border-left: 1px solid #e1dbce;
}

#leftcolbanner的宽度不应该是为什么#rightcol被推下来的问题。这似乎是我经验中唯一的原因，但这次不是这样。

任何人都可以看到任何我看不到的东西吗？

非常感谢

Answer 1

将#rightCol div移到#leftCol div。

之上

Answer 2

您可以将右栏放在3 div容器的第一个位置，它应该可以解决问题。

Answer 3

<div id="main">
<div id="leftcolbanner">
<h2>Willkommen im Ausbildungsstall Green&amp;Gold</h2>
<p>Ut ligula eros, consequat vitae varius eget, consequat ac neque. Vestibulum venenatis odio vitae erat tristique gravida in in elit. Duis molestie ante turpis.</p>
</div>
<div id="rightcol">
<h2>Kontact</h2>
<p><strong>GREEN&amp;GOLD GmbH</strong><br>
Dressurausbildungsstall<br>
Hauptstrasse 3<br>
4525 Balm b. Günsberg</p>

<p><a href="mailto:green-gold@bluewin.ch" class="emailbutton">green-gold@bluewin.ch</a></p>

<div id="rightcolline"></div>

<p><strong>Christian Pläge</strong><br>
+41 79 4 73 52 10</p>

<p><strong>Birgit Wientzek Pläge</strong><br>
+41 79 2 74 27 67<br>
Fax +41 32 6 37 08 53</p>

</div>
<div id="leftcol">
<p>Curabitur gravida tristique felis, eu lobortis neque iaculis vitae. In lacus dui, feugiat eu iaculis sit amet, laoreet ut quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nullam interdum, justo in porta rutrum, sem velit pulvinar purus, id scelerisque orci sem sit amet lacus. Proin posuere nunc quis sapien hendrerit sollicitudin sollicitudin dolor egestas. </p>
<p>Sed nibh magna, imperdiet a ullamcorper vel, elementum at turpis. Quisque sed sem et tellus pretium pretium sed vel nulla. Suspendisse potenti. Vivamus vehicula ultrices enim, quis sagittis tortor dignissim ut. Nulla quis neque sed erat interdum porta. Donec iaculis libero eu justo volutpat volutpat condimentum metus rutrum. Quisque viverra mattis suscipit.</p>
</div>



</div>

Answer 4

我认为你应该添加一个带浮点数的div：left;并放置leftcolbanner和leftcol然后它应该工作。

Answer 5

更好的方法是#leftcolbanner＆amp;一个DIV中#leftcol。然后给他们浮动写这样：

<强> HTML

<div class="left">
 <div id="leftcolbanner"></div>
 <div id="leftcol"></div>
</div>
<div id="rightcol"></div>

<强> CSS

.left{float:left}
#rightcol{float:right}

Answer 6

您需要将这些div放在容纳其内容维度的容器div中。请参阅此jsfiddle，将它们放在带有width:1000px的div中，它们并排排列。

CSS Float导致内容被推送到HTML页面

6 个答案: