コンテンツはオーバーフローで展開します

Question

私は幾分デザイナーですが、私はちょっとCSSを吸っていて、内容が変わったときにサイトを右に広げるようには見えません。あなたは真剣に、すべてのリファクタリングする必要が

Answer 1

Photoshopや他のツールからスライスすることはできますが、このようなことはしないでください。重要な部分だけをスライスします。

サイトを再コード化します。私は2つの画像しか使用しませんでした。http://jsbin.com/esijo5/edit

Happy new yearを見てください。）

Answer 2

画像に、私は絶対パスでHTMLを改訂 http://pastebin.com/WN8XhAHd

： http://pastebin.com/CasrrGe9

HTML：私は君たちが...

CSS役立つことを願ってあなたのCSS。

Photoshopやこのようなデザインツールを使用してhtml/cssをデザイン/カットして自動的に生成しているようです。これらは、正しいコードをした場合、多くの人々が彼らの仕事を失うことになる

...言っ

、私が間違っている可能性があり、あなたはこれを自分でやりました。 ）デザインツールのようにコード化しないことを学ぶ必要があります。

absoluteのデザインで、widthとheightを固定しています。

これは、ページ内のすべての要素が一度に配置されていることを意味します。要素内のコンテンツがコンテナよりも広い場合は、拡張されますが、他の絶対配置要素には影響しません。

ここで、あなたのCSSをすべてリファクタリングするように求めることはできません。 You should start to learn itとなりますので、必要に応じてここで具体的な質問をしてください。

You can train here。私は、インデックスのすべてのそれらのIDを変更するようなささいなことをお勧めします

Answer 3

- ##位置付けを持つことは、そうでない場合は、あなたがしようとしているとして、他の事を心配起動後、一度

#index-01,#index-02,#index-03,#index-04{ 
position:absolute; 
} 

クリーンそれをすべてアップ宣言しました約1時間ほどで本物の混乱状態に陥る。

あなたはあなたがすべてのdivを制御している1つのクラスを宣言する必要があり、それが左に浮いている

かかわらず、まったくそれらを配置すべきではありません。

.float_left {float:left;} 
.clear_both {clear:both} 

とにそれを適用します最後に使用したいdivのそれぞれが浮動小数点をクリアする

<div class="float_left"><img src="index-1.jpg" /></div> 
<div class="float_left"><img src="index-2.jpg" /></div> 
<div class="float_left"><img src="index-3.jpg" /></div> 
<div class="clear_both"></div> 

divが自動的に展開されるはずです。