Question

如何使用浮动元素制作带有浮动元素的容器

这是HTML。

<div>
    <label> foo </label>
    <input type="text" />
</div>
<div>
    <label> foo </label>
    <input type="text" />
</div>

和CSS

input {
    height: 50px;
    float: right;    
    clear: right;
}

它显示如下：

|------------------------------------------------------|
| foo                                 -----------------|
|-------------------------------------|---------------||
| foo                                 |               |
|-------------------------------------|---------------|
                                      |---------------|
                                      |---------------|
                                      |               |
                                      |               |
                                      |               |
                                      |---------------|

我希望它显示如下：

|------------------------------------------------------|
| foo                                 -----------------|
|                                     |               ||
|                                     |               ||
|                                     |               ||
|                                     |---------------||
|------------------------------------------------------|
| foo                                 |---------------||
|                                     |               ||
|                                     |               ||
|                                     |               ||
|                                     |---------------||
|------------------------------------------------------|

解决此问题的正确CSS技巧是什么？

Answer 1

你需要clearfix trick！基本上，使用CSS伪选择器在包装div之后粘贴一个空的块级元素，迫使它扩展到浮动的项目之外。见http://jsfiddle.net/82RWe/

Answer 2

尝试以下代码：

<html>
<head>
<style type="text/css">
    .InnerDiv {
        width: 300px;
        height: 50px;
    }

    .InnerDiv input {
    height: 20px;
    width:100px;
    float:right;
    }
</style>
</head>
<body>
    <div class="InnerDiv">
        <span> foo </span>
        <input type="text" />
    </div>
    <div class="InnerDiv">
        <span> foo </span>
        <input type="text" />
    </div>
</body>
</html>

Answer 3

尝试使用overflow：hidden来设置div的样式。

漂浮和阻塞容器

3 个答案: