Текст, выровненный рядом с фотографией в CSS
Я задаюсь вопросом, существует ли некоторый способ выровнять текст справа от фотографии и сохранить текст в том же самом "поле" даже после концов изображения с помощью HTML и CSS. Быстрая "схема" того, что я пытаюсь выполнить, ниже:
------- --------
------- --------
-Image- - Text -
------- --------
------- --------
--------
--------
Спасибо за любую справку!
4 ответа
Если вы установите ширину текстового div и поместите изображение и текст влево (float: left), это должно помочь. Очистите поплавки после обоих.
<div style="float:left; width:200px">
<img/>
</div>
<div style="float:left; width:200px">
Text text text
</div>
<div style="clear:both"></div>
Поместите текст в какой-то контейнер и поместите этот контейнер рядом с плавающим изображение. Следующий пример кода должен дать вам представление:
<img src="..." style="float:left; width: 200px;" />
<div style="float:left; width: 400px;">
<p>Bla bla...</p>
<p>Bla bla...</p>
<p>Bla bla...</p>
</div>
Если вам нужен какой-то контейнер вокруг этих двух элементов, чтобы он автоматически соответствовал высоте самого высокого из двух плавающих элементов, вы можете установить overflow: hidden на этот контейнер. Чтобы он работал и в IE6, вам нужно будет вернуть его к overflow: auto и добавить что-нибудь странное, например height: 1px .
Обычно вы создаете элемент div или p для текста и задаете как изображению, так и тексту float: left . Точная реализация зависит от других параметров, таких как фиксированная ширина, внешний вид вашего макета и т. Д.
DEMO: http://jsbin.com/iyeja/5
<div id="diagram">
<div class="separator"></div>
<div class="separator"></div>
<div id="text_image_box">
<span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span>
<div class="clear"></div>
</div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
</div>
<style>
/* JUST SOME FANCY STYLE*/
#diagram {
width:300px;
border:1px solid #000;
padding:10px;
margin:20px;
}
.separator {
height:2px;
width:300px;
border-bottom:1px dashed #333;
display:block;
margin:10px 0;
}
/* MAIN PART */
#text_image_box {
width:300px;
margin:0 auto;
padding:0
}
.image {
float:left;
width:180px;
height:300px;
overflow:hidden;
margin:0 auto;
}
.text {
float:right;
width:100px;
padding:0;
margin:0 auto;
}
.text p {
margin:0;
padding: 0 5px;
}
.clear {
clear:both
}
</style>