如何在表单中的另一个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。