Обернуть текст внутри float - PullRequest
Новая
       8

Обернуть текст внутри float

4 голосов
/ 16 августа 2010

Я хотел бы отобразить плавающие изображения с подписью внизу.Но, используя приведенный ниже код, текст заголовка не переносится, это означает, что плавающее изображение с заголовком занимает огромное количество горизонтального пространства.

Если есть лучший способ получить изображение с заголовкомЯ возьму это за любые улучшения этого кода.В противном случае, как я могу получить текст внутри float для переноса?

Я пытался найти это, но мог получить результаты только для переноса текста Вокруг float, а не внутри.

Добавлено: Я бы предпочел не устанавливать явную ширину для поплавка, поскольку мне пришлось бы делать это для каждого отдельного изображения, которое я когда-либо использую.

Полный XHTML ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<title>Test</title>

<style type="text/css">

p.img-with-cap {
    float: left;
}

</style>


</head>

<body>

<p class="img-with-cap">
<a class="img" href="http://sohowww.nascom.nasa.gov/">
<img alt="Sun" src="http://www.heeris.id.au/sites/default/files/sun.gif" width="256" height="256" />
</a>
<br />The Sun - a sinister and destructive force. Image from
<a href="http://sohowww.nascom.nasa.gov/">SOHO website</a>.
</p>

<p style="font-size: 200%">The Sun is a star located at the centre of our solar system. It is
classified as a G2 star, has a mass of about 2×1030 kg, a temperature of
5800 K at the surface and a core temperature of 15.6 million Kelvin. It
constantly emits electromagnetic radiation over the entire spectrum
(indeed, it can be modelled as a black body), peaked at the wavelength
corresponding to that of green light.</p>

</body>

</html>

Ответы [ 2 ]

2 голосов
/ 16 августа 2010

Для плавающих элементов уровня блока может быть применена ширина. Я полагаю, что следующий стиль должен предотвращать перенос: 

p.img-with-cap {
    float: left;
    width: 200px; /* or whatever */
}

Если вам не нужна конкретная ширина, но вы хотите, чтобы она соответствовала ширине изображения, вы можете установить ширину динамически при загрузке окна, например: 

function setWidth() {
    var width = document.getElementById("imgElement").width;
    document.getElementById("wrapperElement").style.width = width;
}

window.onload = setWidth;
1 голос
/ 16 августа 2010

Плавающие элементы, как и любой другой блочный элемент, занимают столько ширины, сколько необходимо для размещения их содержимого - до 100%.

Если вы хотите, чтобы он был уже на 100%, присвойте ему свойство width: ____;.

...