7

ここで見ることができる非常に単純な Web ページ レイアウトを作成しました: 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

float: left; で div を追加する必要があると思います。そこに leftcolbanner と leftcol を配置すると、機能するはずです。

于 2012-04-18T16:32:38.270 に答える
0

より良い方法は、#leftcolbanner&#leftcolを 1 つの 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を参照してください。両方を の div に入れることで、width:1000px横に並んでいます。

于 2012-04-18T16:41:03.543 に答える