Как разместить текст вокруг изображения, как в некоторых газетах, используя CSS? - PullRequest
Новая
       35

Как разместить текст вокруг изображения, как в некоторых газетах, используя CSS?

1 голос
/ 12 апреля 2010

Я хочу, чтобы мое обтекание изображения выравниванием текста выглядело так 

<html>

text text text text text <br>
text text text text text <br>
______________    text text text <br>
image    | text text text <br>
image    | text text text <br>
image    | text text text <br>
___________|  text text text (end)
</html>

Я пробовал это < DIV style="text-align:justify; text-justify:newspapers; padding:10px; font-size:1ุpx" > text text text text ...., но результат выглядит так 

______________ <br>
image    | text text text text<br>
image    | text text text text<br>
image    | text text text text<br>
____________|  text text text text<br>
text text text text text text  
text text text text text text (end)

Что мне делать без ручного нанесения? (например, сначала выровнять текст, затем изображение и окончательный текст), поскольку все изображения и тексты моего веб-сайта будут извлечены из базы данных.

Ответы [ 4 ]

9 голосов
/ 12 апреля 2010

используйте свойство Float в изображении и пишите текст нормально

Например 

<p>
 some text some text some text some text some text some text some text some text some text some text some text some text some text some text 

<img src="some.jpg" style="float:left">

some text some text some text some text some text some text some text some text some text some text some text some text some text some text 

</p>
1 голос
/ 08 сентября 2010

Используйте margin-top на всплывающей коробке.

0 голосов
/ 18 сентября 2014

Я сделал это внутри цикла wordpress, используя «больше тега» в моем посте. так как тег разделяет содержимое, легко перемещать все, что угодно. В моем случае это заголовок и выдержка. Я использовал фильтр wpauto для удаления тегов форматирования из WordPress. Мой файл CSS выглядит следующим образом: 

body {
width: 100%;
height: 100%;
background-color: #ff5800;
}
#page {
width: 45%;
min-width: 230px;
background-color: #fff;
border: 1px solid white;
}
.content{
margin:10px;
background-color: #ff5800;
text-align: justify;
padding: 6px;
}
.title{
font-family: Freestyle Script;
color: black;
background-color: #fff;
min-width: 200px;
width: 75%;
font-size: 3em;
line-height: 50px;
vertical-align: middle;
float:left;
padding-right: 10px;
padding-top: 12px;
text-align: center;
margin-left: -6px;
margin-right: 6px;
}
.excerpt{
font-family: Freestyle Script;
color: rgba(0,0,0,0.7);
background-color: #fff;
min-width: 200px;
width: 75%;
font-size: 2.2em;
line-height: 32px;
float:left;
clear: both;
margin-left: -6px;
padding-right: 10px;
padding-bottom: 12px;
text-align: center;margin-right: 6px;
}

И я позволил этому index.php работать из подкаталога блогов: 

<?php
  // get the blog content
  define('WP_USE_THEMES', false);
  require('../wp-blog-header.php');
  query_posts('showposts=1' );
remove_filter('the_excerpt', 'wpautop');
remove_filter('term_description','wpautop');
remove_filter('the_content','wpautop');
function remove_images( $content ) {
   $postOutput = preg_replace('/<img[^>]+./','', $content);
   return $postOutput;
}
add_filter( 'the_content', 'remove_images', 100 );
?>
<?php while (have_posts()): the_post(); 
// split content at the more tag and return an array
function split_content() {
    global $more;
    $more = true;
        $content = preg_split('/<span id="more-\d+"><\/span>/i', get_the_content('more'));
    for($c = 0, $csize = count($content); $c < $csize; $c++) {
        $content[$c] = apply_filters('the_content', $content[$c]);
    }
    return $content;
}
?>
<div id="page">
<div class="content">
<?php
    // the_content();
    // split content into array
        $content = split_content();

    // output first content section in column1
        echo array_shift($content);
?>
  	// the object where the float happens
	<div class="title"><?php the_title(); ?></div>
	<div class="excerpt"><?php the_excerpt(); ?></div>
  	// you wont recognize a gap inbetween the splittet surounding
  
<?php
$link = get_permalink();
	// output remaining content sections in column2
        echo implode($content), ' <a href="', ($link), '">to the mainsite...</a>';
?>
<?php endwhile; ?>
 
	</div>
</div>
</div>
Не забывайте использовать тег "more" внутри вашего поста, иначе эффект не сработает. Хорошие шансы на предварительный просмотр здесь: Плавающий
0 голосов
/ 12 апреля 2010

Используйте свойство align om tag image, т. Е. <img src="" alt="" align="left" />

Но все же я зависит от того, где тег img находится в html ..

http://www.w3schools.com/tags/att_img_align.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...