trying to understand <div> element_问答_开发者

<style>

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    background: gold;
}
div.content {
    background: yellow;
    border: 1px solid  purple;
    height: 150px;
}

</style>

            <div id='float'>
                Float text. 
            </div>
            <div class='content'>
                Content text. 
            </div>
            <div class='content'>
                Content text. 
            </div>

can an开发者_高级运维yone explain how the 2nd div content is on the newline ? while the 1st div is inline with div#float?

By default, divs will take up the entire width of the block. Your first one is just beginning after the floated div because that's where it can begin. Since both your content divs are block-level elements, they will take up the entire width available to them.

There are lots of ways to control this, but I'm not sure what you're after.

The second div is displayed as a block-element. Block elements have a width of 100%, so there is no room left for the first div to appear on the left size of your second div.

try switching the "display" css property to "inline-style"

The first <div class='content'> is 150px tall, the same as the #float one, so it's pushed down exactly one line. If you wanted the #float to "span" both lines, give it more height, e.g.:

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 300px;
    border: 1px solid blue;
    background: gold;
}

You can try it out here.

As becomes clear with above answers, this is not an issue specific about divs. It's about something called "The flow" within html-pages.

DIV's render default as an block element, which gives it a maximum width. When you float such an element, it loses this effect. Block elements however do not automatically clear floats. Thus, the first contentdiv takes all space available next to the float. The other contentdiv starts at the newline.

It's behaving exactly as it should. The first div in the markup is floated and thus taken out of the flow. It'll take up the 150x150 slot up in the top left corner and anything that comes after it in the markup will try to squeeze in the left over space to the right of the floated div which is what the first content div does. div's are block level elements so they will take up the entire width of the available space. Unlike an inline element, they will not shrink to fit the rendered text.

The first content div will stretch out till the rightmost edge of the window. If you're wondering why the first div (float div) did not behave like a block level element, it's because it was floated, which will cause it to shrink to fit it's contents (in your case you gave it an explicit width of 150px).

Once the browser has rendered the float div and the content div, it has exhausted the left over space so it goes to the next line and starts from the very beginning of that line for the second content div.

Looks like you are trying to set up a navigation bar followed by content. If you wrap your content in a div and float that div to the left, you will stay to the right of the gold div but a column drop will occur when the browser is resized too small to accommodate them. So you need a parent div with a width for both the float and content divs. I added an 800 pixels outerwrapper div to your markup.

.....

div#contentwrapper {
  float: left;
  width: 550px;
}

#outerwrapper {
  width: 800px;
}

</style>
</head>

<body>

<div id="outerwrapper">
<div id='float'>
    Float text.
</div>

<div id="contentwrapper">
<div class='content'>
    Content text.
</div>
<div class='content'>
    Content text.   
</div>
</div>

</div>
.....

You might also want to use a different name than the css reserved word "float" for your divs. For more CSS float tutorials.