如何在窗體中的另一個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。