css-float - 浮动 DIV 问题

Question

这是我的代码演示http://jsfiddle.net/mn7Ut/ 我似乎找不到在 h1 下正确添加文本的方法。这就是我尝试添加一些文本时发生的情况http://jsfiddle.net/uY3pQ/ 这次我做错了什么？：C

div {margin:0; padding:0;}


#wrap {
    background-color:#000000; 
    width:auto;
    float:left;
    padding:50px;
    } 


.container {
    width:500px;
    background:#666666;
    color:#FFFFFF;
    float:left;
    margin-right:25px;
    }

.left {
    float:left;
    display:block;
    }

.padding {
    padding:30px;
    }

.list {
    background-color:#333;
    }

.box {
    background-color:#ccc;
    width:100px;
    }

h1 {
    color:#000;
    background:#ddd;
    }   

.

<div id="wrap">

    <div class="container">
        <div class="box-container">
            <h1 class="left padding">Some text here</h1>
                <ul class="list padding left">
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                </ul>
        </div>
    </div>

    <div class="box padding left">
    Some text here Some text here Some text here
    </div>

</div>

Answer 1

您可以将 h1 和 text 包装在一个容器中，然后将其向左浮动：

html

<div class="left inner" >
     <h1 class="padding">Some text here</h1>
     text text text text text text text text
 </div>         

css

.inner{
    display:inline-block;
    width:200px;
}

有关完整解决方案，请参见小提琴http://jsfiddle.net/uY3pQ/5/

• 经过铬测试