css - 在 div 旁边 float div

Question

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

在这个页面上，我试图在字幕左侧 float 一个标志

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

我似乎无法让标志正确布局，最好的方法是什么？另外，如何设置标志的高度以紧紧包裹其中的文本？

Answer 1

好人啊

您在该页面上有很多 soooooo CSS，难怪您会把自己束缚住。只要看看带有 Firebug 的任何元素上的大量继承和覆盖样式。

首先，一个简单的 float:left 将 完成这个技巧，但只有当两个元素的组合宽度比它们的父容器窄时它才会起作用 - 否则还有什么可能会发生但它会结束？

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

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