フォーム内の別のdiv内のdivセクションをフローティングする方法は？

Question

私の目標は、画像の左側にチェックボックスを置き、右側の画像に対応する情報を持つことですが、それは起こっていません。違いがあれば、これはすべてフォームの一部です。何か提案はありますか？ これは私のhtmlです：

 <div id="bookz"> 
     <input type="checkbox" name="book1"> 
     <div id="b11"> 
     <img src="tewwg.jpg" alt="Their Eyes Were Watching God book cover" height=280 id="bimg1"><br> 
     <div id="b1"> 
     Their Eyes Were Watching God by Zora Neale Hurston <br> 
     Price: 12.85 <br> 
     Quantity: <input id="bqua1" type="text" size="5"><br> 
    </div> 
    </div> 
    <input type="checkbox" name="book2"> 
    <div id="b22"> 
     <img src="beloved.jpg" alt="Beloved Book Cover" height=280 id="bimg2"> 
     <div id="b2"> 
     Beloved by Toni Morrison<br> 
     Price: 15.75<br> 
     Quantity: <input id="bqua2" type="text" size="5"><br> 
    </div> 
    </div> 

&これは私のCSSです：

@charset "utf-8"; 
body{ 
    background: #ffbae1; 
    background: linear-gradient(to bottom right, #ff9c42, #ffc3b7); 
} 
img{ 
    border-style: dotted; 
} 
h1, h2, form, button, #tot, #gtot, #shipping{ 
    font-family: 'Dancing Script', cursive; 
    text-align: center; 
} 
#b1, #b2{ 
    float: right; 
    margin: 2px; 
} 
#tot{ 
    margin-top: 5px; 
    align: center; 
} 
#info, #bookz{ 
    text-align: left; 
} 

Answer 1

divをフロートあなたは幅とディスプレイを必要としています。したがって、浮動小数点のdivには特定のwidthを追加し、divにはdisplay: inline-blockを追加することでこれを達成できます。私はこれがあることを前提としてい

：あなたのスタイルに私はこれを達成しなかったことを追加することで

#b1,#b2{ 
    float: right; 
    width:80%; 
    height:auto; 
    margin: 2px; 
    vertical-align: top; 
    display:inline-block; 
} 

#b11,#b22{ 
    display:inline-block; 
    width:100%; 
} 

：

は、あなたが与えている例では、私は次のスタイルを追加しましたあなたは何をしたいですか？しかし、私が間違っていれば私を修正してください。

ここにはjsfiddleがあります。