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和文本包装在容器中，然后向左浮动：

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/

使用chrome测试

浮动DIV问题

1 个答案: