How to use CSS float without hiding parts of a DIV
When CSS float is used on a DIV, other DIVs that are not floated continue to occupy the space of the floated DIV. While I am sure this is intentional, I do not know how to achieve the effect I am looking for. Please consider this example:
<html>
<div style="width:400px">
<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div style="background-color:red;border:thin black solid">Some sample text</div>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</html>
If you paste this HTML in a browser (or examine its jsfiddle), you'll notice that "Some sample text" is red, and that the red background extends all the w开发者_如何转开发ay through the floated DIV. While I am sure there is a way to obscure the parts of the red background I don't want, it would still leave the border cropped off and hidden underneath the DIV. Ideally, I want the background color and border to only occupy valid text space, and not creep underneath the floated DIV. Is this effect possible?
Please note that I am using the float property not as a replacement for columns, but as a block that will have the text flow around it. So far none of the proposed solutions takes this into account. For clarity, here are some images.
This is what I get:
This is what I want:
You'll notice that in both examples, the final text wraps around the floated part as the text reaches the bottom. My second example I can achieve by directly specifying the width of the div containing "Some sample text". I do not want to specify the width. It seems redundant since I want the same width as that of the text around it. But perhaps that isn't possible?
Here's one solution:
<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>
Basically the magic here is overflow: hidden, which changes the CSS visual formatting model. Take a look at CSS layout fundamentals, part 5: floats:
Fixing adjacent boxes
Let’s look at the red paragraph border problem first. The reason the paragraph border appears behind the image is because floats don’t reposition block boxes that are adjacent to them. In this example, the floated image is only pushing the line boxes inside the paragraph across. So the text is pushed to the right, but the actual paragraph box still stretches across the full width of the container.
The fix for this issue comes from a very well-hidden paragraph in the floats section of the CSS 2.1 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
So to prevent our paragraph block from overlapping the floated content, the solution is to create a “new block formatting context”, in CSS specification author terminology. Sounds tricky, eh? Fortunately, it isn’t that hard. New block formatting contexts are created by any block which meets these criteria:
- is floated
- is absolutely positioned
- has a display property value of one of more unusual flavours (inline-block, table-cell, etc.)
- has its overflow property set to something other than visible.
The last option is the one that is easiest to do in most cases: setting overflow: auto on our paragraph will create a new “block formatting context”, and render the paragraph border in the right place.
If you add a span in your div and style that like so (of course, I would not actually normally use inline styling):
<div style="overflow: hidden;">
<span style="background-color:red;
border:thin black solid;
display: inline-block;">
Some sample text
</span>
</div>
Then you can get this effect shown in this fiddle. Note that the overflow:hidden on the div itself is to accommodate line wrapping for long text strings.
It appears this is simply not possible the way I had hoped. As Cletus explained, "Nothing allows that. You can wrap text around the right float but that will extend the block element to the right as well. A block element is, by definition, a square and you seem to want a square with the top right cut out and the border to follow that line. Can't do it."
(I upvoted Cletus' answer, but didn't want to mark it as the correct "answer" because I believe future Googlers should be let down quickly.)
You should specify the other column as float left. The way that you have it right now the text on the left is going to wrap the floated text on the right. It would also be wise to specify the size of the floated object on the left too.
<html>
<div style="width:400px">
<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div style="background-color:red; width: 250px; border:thin black solid">Some sample text
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></div>
</html>
Also, consider using CSS it will make this code much easier to maintain long-term<<
EDIT: I thought you wanted everything to be floated to the left I think I misunderstood your question. What you are trying to do is not possible. The best thing you could do is either specify the margin of the object floated to the right to be equal to 400-150 (250px), or specify the width of the "some text" object to be equal to (250px).
I think there is only one thing you need to do:
- Give the "sample text" div a right margin, greater than the width of the right-floated element
That should do it.
Edit: Based on your edit I would suggest you use a span (an inline element) instead of a div (a block element). If you always need it to be on a separate line, you can give both that element and the element after it a clear:left.
I came to know this question so late, anyway I am fixing your problem. See this Fiddle
You need to define display: table;
As this:
<div style="background-color:red;border:thin black solid;display: table;">Some sample text</div>
Note display: block; won't work as display: table; and you could also use display: table-cell;
You may also like this question: css inline-block vs table-cell
加载中,请稍侯......
精彩评论