Html 停止第二个Div缠绕浮动Div

我有一个小问题，在我的项目中定位一个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

我希望在每个小部件上强制执行什么

这两个主要类别是：

.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的末尾

我知道使用HTML中的

标记可以很容易地解决这个问题，但我相信在这里实现这个应该很容易

我认为这里的主要问题是

标题

是右对齐的，而内容是左对齐的

---

任何CSS解决方案（因为它是为不同大小的屏幕设计的，我更喜欢使用%而不是px）？

用于类“

.widgetHeader

“删除属性”

浮动：右键

”并添加“

文本对齐：右键；

”。这将解决您的问题。

修复代码

不要将其浮动，而是可以将其与文本对齐右对齐，如下所示：

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

---

另一种方法

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

.main{
显示：块；
宽度：300px；
边框：1px实心#999；
背景色：#EEE；
填充物：5px；
}
.形象{
浮动：左；
显示：块；
宽度：120px；
高度：120px；
边框：1px实心#999；
背景色：#FFF；
}
.内容{
显示：块；
左边距：130像素；
颜色：#444；
}
.头衔{
文本对齐：右对齐；
字体大小：粗体；
}
.清楚{
明确：两者皆有；
}

标题在这里
其余的内容都放在这里，看起来既美丽又庄严

使用

text align:right

和

display:block

代替float（防止标题在温度计div下缠绕）

或

您仍然可以使用float并设置标题div的最大宽度

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

---

你只需要改变一件事（如果你想让它看起来更好看一点，就要改变两件事）：

.widgetHeader{
文本对齐：对；谢谢你的回答-但是，你如何阻止“long”一词被“温度计”包裹？@jbutler483：查看我的编辑以获得一个改进的（在我看来）解决方案我有一个非常干净的解决方案。我不太确定“Clear:tware”是做什么的，但它有很多好的方面我可以（可能应该）做使用.Cheers！@jbutler483:尝试删除
清除：两个
，您将看到它的用途；）
.widgetHeader {
    display: block;
    text-align: right;
    padding-top:5%;
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}

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

    .widgetHeader {
    text-align:right; <--- add this
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}