0

私の問題の中心には、この単純なcssレイアウトがあります。

ここに画像の説明を入力してください

左側はに設定されfloat:left、幅は。70%に設定され、右側はに設定されfloat:right、幅は。に設定され30%ます。しかし、これは私に彼らが私もそれらを必要とするように彼らが完全に触れないというギャップを残します：

ここに画像の説明を入力してください

これを解決するために、パーセンテージを変更できます。70.1% and 30%.これは、ほとんどの場合、ギャップがなくなることを意味しますが、右側が左側の下に押し下げられることがありますが、これは良くありません。

右側の幅をに設定してみたところauto、右側が再び押し下げられましたが、次のようになりました。

ここに画像の説明を入力してください

それから私は右側のを取り除くことを試みfloat:rightました。残りのdiv（これも右側の内側にありますがregister_containerの後にリストされています）が右側にあるにもかかわらず、register_containerが一番下まで下がったことを除いて、どのALMOSTが機能しますか。 ここに画像の説明を入力してください

これが私のcssの貼り付けであり、これが一時的にアップロードしたサイトです：http: //greenevent.site50.net/index.php

誰かが私の問題を解決するのを手伝ってくれるなら、それは素晴らしいことです！（はっきりしない場合は、最初に投稿されたWebサイトの画像のように配置しますが、隙間はありません。）

4

2 に答える 2

2

右のコンテナにfloat: right;切り替えます。float: left;コンテナにも幅を割り当てる必要があります。

Webkitブラウザーにはバグがあります。これは、100％が得られない場合があることを意味します。これは、少し面倒な場合があります。

http://jsfiddle.net/spacebeers/Lyphr/2/

Chromeの開発ツールで右側のコンテナの幅を27％に変更すると、目的のレイアウトが得られます。

于 2012-07-30T16:21:56.723 に答える
1

また、左側のみをフロートさせ、右側にマージンを持たせることもできます。

​#left
{
   float: left;
   width: 70%;
   background: yellow;
}

#right 
{
   margin-left: 70%;
   background: red;
}

http://jsfiddle.net/2z6KZ/

于 2012-07-30T16:29:39.237 に答える