floats and blocking containers
http://jsfiddle.net/2yr2A/19/
How do you make containers with floating elements block around the floating elements
Here is the HTML.
<div>
<label> foo </label>
<input type="text" />
</div>
<div>
<label> foo </label>
<input type="text" />
</div>
And CSS
input {
height: 50px;
float: right;
clear: right;
}
And it displays like so :
|------------------------------------------------------|
| foo -----------------|
|-------------------------------------|---------------||
| foo | |
|-------------------------------------|---------------|
|---------------|
|---------------|
| |
| |
| |
|---------------|
I would like it to display like :
|------------------------------------------------------|
| foo -----------------|
| | ||
| | ||
| | ||
| 开发者_StackOverflow |---------------||
|------------------------------------------------------|
| foo |---------------||
| | ||
| | ||
| | ||
| |---------------||
|------------------------------------------------------|
What is the correct CSS trickery to fix this?
You need the clearfix trick! Basically, use CSS pseudoselectors to stick an empty block-level element after the wrapping div, forcing it to expand past the floated items. See http://jsfiddle.net/82RWe/
Try styling your div's with overflow:hidden.
try the following code:
<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>
加载中,请稍侯......
精彩评论