Geek Answers Handbook

CSS: format text for wrapping (or determine the width of an element with only one of its children)

Ok, this is strange to me. Here is the HTML element I'm working with:

LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png

Photo with the inscription. Ideally, I would like it to look like this: through pure CSS:

alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png

The width of the parent image element should depend on the size of the image.

I can change the markup that I need. (The text is not currently in its own div, but it can be if necessary.) Is there a way in CSS for this? I get the impression that I need to "force" the text to wrap as much as possible (which is not possible) or to make the entire width of the element dependent on only one element and ignore the other (which I have never heard before).

Is there a real way? Or do I need to use magic Javascript? (The JS solution is pretty simple, but pretty lame ...)

+5
source share
6 answers

Check out this great article on the best ways to handle the image-with-a-caption script.

, .

+3

: . CSS display: table- * ( IE7-js IE6).

-: fixed , , . , ( ).

0

table . . , . clip: CSS, ( - , cssplay.co.uk .)

, , , , . , - . .

0

, , , . , :)

, , , , . .

!

0

, , , , :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style>
div.a {float: left;
        position:relative;}

div.b {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: center;
        background-color:gray;}

</style>
</head>

<body>

<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>

</body>
</html>

, , div a. , div . - , .

0

.

The solution uses a table (or div with a display: table, if you prefer), and adds a second column to “click” the first cell on the minimum space that it really needs. The table can be set to 1px wide to stop its growth on the page. I put together a demo to show this in action:

http://test.dev.arc.net.au/caption-layout.html

Tested and works in IE8, Firefox and Safari / Win

0
source

More articles:


All Articles