div内のこれらの2つの要素を整列する方法

Question

div内の2つの要素（引用符とアーノルドの図）を整列するのに少し問題があります。ここで

が、それは次のようになります。ここでは

<div class="container"> 
    <div id="quote">  
     <p id="tagline-quote">"As a personal fitness trainer, I&#039;m asked on a weekly basis where the best place to buy supplements is, and my answer is always bodybuilding.com"</p> 

     <img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg"></img> 
    </div> <!-- end #quote --> 

はCSSです：

.container { 
    margin: 0 auto; 
    position: relative; 
    text-align: left; 
    width: 960px; 
} 

#quote { 
    padding: 60px 400px 20px 13px; 
    text-align: center; 
} 


p#tagline-quote { 
    color: #777676; 
    font-family: Georgia,serif; 
    font-size: 20px; 
    font-style: italic; 
    line-height: 30px; 
    text-shadow: 1px 1px 0 #FFFFFF; 
} 

#q-image{ 
} 

Answer 1

これは教科書「css floats 101」です。 ああ、待って、私は元のだと思ったが、それはちょうどthe article on alistapartと呼ばれるものだ。あなたは引用符/段落内の画像を配置し、それが正しい浮くことができ - それはセマンティックレイアウトはCSSのために:)

<div class="container"> 
    <div id="quote" class="clearfix"> 
     <img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg" />   
     <p id="tagline-quote">&#8220;As a personal fitness trainer, I&#039;m 
     asked on a weekly basis where the best place to buy supplements is, 
     and my answer is always bodybuilding.com&#8221;</p> 
    </div> 
</div>​​​​​​​​​​​​​​​​​​​​​ 

を引き継いだ前に、私はのいくつかを投げてきたために山車が作られたものをかなりのです元パディング：

#q-image{ 
    float:right; 
    /*add some margin so that there is space between text and photo*/ 
    margin-left:10px; 
} 

は今、あなたはKodeKreachorのコードを持った問題は、以下のdivを「文字化け」一見間違っていたとあなたはおそらくそれがあるべきよりも短い探して引用コンテナを見ました。回避策は、フローティング要素が内部に収まるように親コンテナを展開する "clearfix"を使用することです。それをコードから削除し、（一時的に）強調表示されたコンテナがどのように動作するかを確認します。

もう1つの段落を追加して、そのうちの1つに画像を移動してみてください。 「奇妙な」振る舞いが完全な意味を成すようになりました。段落は、巨大なギャップなしにフローティングされたイメージをうまく流れ始めます。

フィドル：http://jsfiddle.net/EvdV8/また、適切な引用符。また、imgは自己閉鎖要素ですので、元のマークアップは無効です。

Answer 2

あなたはサイド・バイ・サイドの話をしている場合は、フロート」の組み合わせを使用します：左; 「display：inline-block」を使用して互いに隣り合うようにします。

.container { 
    margin: 0 auto; 
    text-align: left; 
    width: 960px; 
} 

#quote { 
    padding: 60px 400px 20px 13px; 
    text-align: center; 
    display: inline; 
} 


p#tagline-quote { 
    color: #777676; 
    font-family: Georgia,serif; 
    font-size: 20px; 
    font-style: italic; 
    line-height: 30px; 
    text-shadow: 1px 1px 0 #FFFFFF; 
    position:relative; 
    width:400px; 
    display: inline-block; 

} 

#q-image{ 
    position:relative; 
    float: left; 
}