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

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

我认为这里的主要问题是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

Answer 2

对于课程“.widgetHeader”，请移除属性“float: right”并添加“text-align: right;”。这将解决您的问题。

Answer 3

而不是使用float text-align: right和display: block（以防止标题包含在温度计div下）

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

Fiddle here

OR

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

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

Fiddle here

Answer 4

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

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

删除填充顶部。 Fiddle here

阻止第二个Div环绕着漂浮的Div

4 个答案: