Getting a bunch of divs to line up correctly inside a div that is floated right
I think it is best described by looking at an example:
http://jsfiddle.net/kV9yn/16/
That is my code (simplified) the problem is that the rectangle divs on the right div don't line up correctly. What I want is for them to line up from left to right, and then carry over onto the second line when they go past the edge of the div:
Intended look:
._______________________________________________________________________.
| |
| Title |
| |
| blah blah blah blah blah blah |
| |
| Ingredient: [ ] [block] [block] [block] [block] |
| [block] [block] ... |
| 开发者_如何转开发 |
|_______________________________________________________________________|
Change:
.ingredient
{
display:block;
...
To:
.ingredient
{
display:inline-block;
...
And you're all set. The name of the property is pretty self-explanatory.
Here's a Fiddle: http://jsfiddle.net/kV9yn/12/.
HOw about something like this:
<!DOCTYPE html>
<html>
<head>
<title>The divs?</title>
<style type="text/css">
h1 {
text-align: center;
}
body {
margin: auto;
width: 600px;
}
#blocks {
float: left;
width: 50%;
}
.leftFloat {
float: left;
margin-right: 1em;
width: 18%;
}
fieldset {
border: none;
float: left;
width: 40%;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>blah blah blah blah blah blah</p>
<form>
<fieldset>
<label for="ingredient">Ingredient:</label>
<input type="text" id="ingredient" />
</fieldset>
</form>
<div id="blocks">
<div class="leftFloat">
[block]</div>
<div class="leftFloat">
[block]</div>
<div class="leftFloat">
[block]</div>
<div class="leftFloat">
[block]</div>
<div class="leftFloat">
[block]</div>
<div class="leftFloat">
[block]</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论