浮在标题旁边，一旦标题分成两行 [英] Floating next to headline once headline breaks off into two lines

问题描述

扩展

HTML：

 < div class =test> 
< h1>测试测试测试测试测试测试< / h1> 
< div class =another> 
< div class =subanother1> 
< p>另一个测试另一个测试< / p> 
< / div> 
< / div> 
< / div> 
  

CSS：

 code> .test {
 border：1px solid black; 
 width：300px; 
} 
 h1 {
 float：left; 
 border：1px solid #ccc; 
 margin：0; 
 padding：0; 
} 
 .another {
 display：inline; 
 line-height：1.5em; 
} 
  

解决方案

更改 .another ， .subanother1 和 p 至 ：inline 会解决这个问题。

检查jsfiddle

  .another，.subanother1，p {
 display：inline; 
 line-height：1.5em; 
} 
  

Expanding on Making floated text break off onto the next line which basically produces this:

How does one retain the float of the paragraph once the headline gets a little bit longer?

Desired result:

http://jsfiddle.net/frank_o/06ewqwun/9/

HTML:

<div class="test">
    <h1>Test test test test test test</h1>
    <div class="another">
        <div class="subanother1">
            <p>Another test another test</p>
        </div>
    </div>
</div>

CSS:

.test {
    border: 1px solid black;
    width: 300px;
}
h1 {
    float: left;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
}
.another {
    display: inline;
    line-height: 1.5em;
}

解决方案

Changing the .another , .subanother1 and p to display: inline will solve the problem.

check the jsfiddle

.another, .subanother1, p {
    display: inline;
    line-height: 1.5em;
}

这篇关于浮在标题旁边，一旦标题分成两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！