2012-01-10 8 views
0

これはよくある質問ですが、私は既に検索した方法を試してみました。ここにjsfiddle:http://jsfiddle.net/ZfZK9/とここに私の問題がある表示ブロックが思考通りに機能していない...?

基本的に、私はメインのdivコンテナを持っている。それはイメージといくつかのテキストを持っています。私は一方の側にイメージを、次に他方にテキストを必要とします。私は、100%の高さを設定し、それを正しく浮かべてdivにimgを置こうとしましたが、テキストが画像の下に来るとjsfiddleで見ることができるように、列の形成を維持しません。

表示:ブロックと高さ:100%が左の列に何も表示されない理由はわかりません。

おかげ

編集:私は高さを想定している:それはレンダリングされると、テキストが後に追加されるので、100%は動作しません。私はまだエレガントな解決策を見つけることを試みていますが、汎用的です。私が浮かぶように(画像のとテキストの)両方のdivを設定すると

もう一つの問題は、さ:左、それだけで画像を表示する、それ

+0

次回は「TidyUp」ボタンをクリックしてください。 –

+0

ありがとうございます。申し訳ありません – Raekye

+0

'main_content'に高さがないため、' height:100% 'は動作しません。例:['height:780px;'](http://jsfiddle.net/ZfZK9/13/)。 (注意してください、左の 'div'の' class = "clearfix"を削除しました。何も意味がないようです。) –

答えて

1

それは次のように行うことができます。ちょうどその時、あなたが望む結果を得るティルパディングとマージンで遊んで、その後、特定の幅にこれら両方の側面を設定し、両側の周りに列として2つのdivのを作成http://jsfiddle.net/ZfZK9/34/

。あなたのコンテンツの周りにあなたの境界線を維持するために

、私は2つの列を浮かべ....

http://jsfiddle.net/ZfZK9/34/

は、いくつかのことを編集するために持っていたそれを得るためにビットを取っ含ま役立つclearfixを追加しましたそうだが、今はすべてがうまくいくはずだ。 2つの浮動小数点divが含まれ、ブラウザにはclearfixが追加されています。画像やサイドバーが下に向かっているかのように表示したい場合はFaux Columns

+0

ありがとうございます! – Raekye

+0

あなたは大歓迎です! –

0

下のテキストは、あなたは、いくつかのHTMLでCSSといくつかを持っていますCSSでこれは続くことが難しいです。私が見ていると信じているのはよくある間違いです.100%に何かを設定するときに考慮する必要があるのは100%です。それは常にその要素の親です。だから、親は何に設定されていますか?何もなければ、あなたの問題があります。

親が100%に設定されている場合も、同じ質問が適用されます。

編集:今問題が表示されます。私は誤解しました。あなたがしたいことは、右のdivの幅、テキストの幅を設定します。それをフロートし、問題を解決するはずです。

+0

私はそれを試みましたが、今は400が親コンテナの左端から始まったかのように動作しています。右の列/ divが開始位置を知っているように、最初の列の右端に設定するにはどうしたらいいですか? – Raekye

関連する問題