将 div 浮动到 div 旁边答案

【问题标题】：float div next to div将 div 浮动到 div 旁边
【发布时间】：2009-08-14 20:35:44
【问题描述】：

http://dev.dealercontrol.net/dealercontrol/index_comp1.html

在此页面上，我试图在字幕左侧浮动一个标志

<div>
              <div class="flag certified">Certified</div>
              <div class="subtitle left">Deal On 09 Black Lamborghini LP560</div>
            </div>

我似乎无法正确布局标志，最好的方法是什么？还有如何设置标志的高度以紧紧地包裹在里面的文字上？

【问题讨论】：

标签： css html css-float

【解决方案1】：

好人。

您在该页面上soooooo 很多 CSS 正在进行，难怪您会陷入困境。只需使用 firebug 查看任何元素上大量继承和覆盖的样式即可。

首先一个简单的float:left 可以解决问题，但它只有在两个元素的组合宽度比它们的父容器窄时才有效 - 否则会发生什么但它会换行？

其次，您上面的代码实际上并不是页面上的内容。太多容器 div 妨碍 - 将两个必需元素简化并移动为同一父级的兄弟节点，并同时提供 float:left。

第三，减少你的膨胀！ .clear 类是纯粹的膨胀（见here）。您真的不需要超过 2 个 CSS 文件（一个全局基础和一个页面扩展名），因此可以压缩和合并您的文件。尽可能多地删除标签选择器样式（这是创建所有继承/忽略堆栈的原因，这些堆栈使您处于无法维护的难以破译的位置）。希望到那时您有一个可行的设计和一个更轻便、响应速度更快的页面，您可以在以后更轻松地进行调试。

【讨论】：

【解决方案2】：

将flag放入div中，并使其向左浮动

<div>   
  <div class="subtitle left">
    <div class="flag certified" style="float: right">Certified</div>
    Deal On 09 Black Lamborghini LP560   
  </div>
</div>

【讨论】：