7

我创建了一个非常简单的网页布局，可以在这里看到： 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 被下推的问题。根据我的经验，这似乎是通常唯一的原因，但这次并非如此。

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

非常感谢

4

6 回答 6

12

将#rightColdiv 移到 div 上方#leftCol。

于 2012-04-18T16:28:33.030 回答
1

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

于 2012-04-18T16:32:17.443 回答
0 
<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>
于 2012-04-18T16:32:06.543 回答
0

我认为你应该添加一个 div 与 float: left; 并将 leftcolbanner 和 leftcol 放在那里，它应该可以工作。

于 2012-04-18T16:32:38.270 回答
0

更好的方法是将#leftcolbanner&#leftcol放在一个 DIV 中。然后给他们浮动，这样写：

HTML

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

CSS

.left{float:left}
#rightcol{float:right}
于 2012-04-18T16:35:30.157 回答
0

您需要将这些 div 放在一个容器 div 中，以适应其内容的尺寸。在这个jsfiddle中看到，通过将它们都放在一个带有 a 的 div 中width:1000px，它们并排排列。

于 2012-04-18T16:41:03.543 回答