html - 停止 Second Div 环绕 float Div

Question

我在元素中定位 div 时遇到了一个小问题。

+------------------------+
|+-------+ ~~~~     TITLE| <--how can I stop the text wrapping up the 
||       | ~~~~~~~~~~~~~ |\                      left hand side here?
||       | ~~~~~~~~~~~~~ | \
||       | ~~~~~~~~~~~~~ |  \
||       | ~~~~~~~~~~~~~ |   \
|+-------+            ^  |   Title Div (class="widgetHeader" in example)
+---------------------|--+
   ^                  |
   |                   \
 Thermometer div        \
 (all good)              \
                       "widgetContent" in example fiddle

但是，我希望强制 div 的标题阻止内容环绕它。

类似于:

+------------------------+
|+-------+          TITLE|  
||       | ~~~~~~~~~~~~~ |
||       | ~~~~~~~~~~~~~ | 
||       | ~~~~~~~~~~~~~ |  
||       | ~~~~~~~~~~~~~ |   
|+-------+ ~~~~~         |   
+------------------------+

我希望对每个小部件强制执行。

This is the fiddle.

两个主要类是:

.widgetHeader {
    padding-top:5%;
    float:right;
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}
.widgetContent {
    float:left;
    text-align:left;
    padding-top:20%;
}

它位于示例中 CSS 的末尾。

我知道我可以使用 <br /> 轻松解决这个问题HTML 中的标签，但我确信应该可以很容易地在这里实现这一点。

我认为这里的主要问题是 Title右对齐，内容左对齐。

任何 CSS 解决方案(因为它将针对不同尺寸的屏幕设计，我更喜欢使用 % 而不是 px)？

Answer 1

修复代码

不要 float 它，而是可以使用text-align将其右对齐，如下所示:

.widgetHeader {
    padding-top:5%;
    margin-right:4px;
    font-weight:bold;
    text-align:right;
    text-decoration:underline;
}

Here is the updated fiddle

---

另一种方法

如果我自己从头开始做这件事，我可能会做这样的事情:

.main {
    display:block;
    width:300px;
    border:1px solid #999;
    background-color:#EEE;
    padding:5px;
}
.image {
    float:left;
    display:block;
    width:120px;
    height:120px;
    border:1px solid #999;
    background-color:#FFF;
}
.content {
    display:block;
    margin-left:130px;
    color:#444;
}
.title {
    text-align:right;
    font-weight:bold;
}
.clear{
    clear:both;
}

<div class="main">
    <div class="image"></div>
    <div class="content">
        <div class="title">Title Here</div>
        <p>The rest of the content goes here and will look beautiful and majestic.</p>
        <div class="clear"></div>
    </div>
</div>

Here is a working example