How to put text float around image like some newsp

2019-04-15 07:34发布

站内问答 / HTML/CSS
1237 4 5

I want my image wrapping with text align like this

<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>

I've tried this < DIV style="text-align:justify; text-justify:newspapers; padding:10px; font-size:1ุpx" > text text text text .... but the result comes like this

______________ <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)

What should I do without manual putting ? (like align text first , then image and final , text) because all images and texts of my website will be fetched from the database.

4条回答
可以哭但决不认输i
2楼-- · 2019-04-15 07:51

I did this inside a wordpress loop, making use of the "more tag" in my post. as the tag divides the content it is easy to make the float around whatever you like. In my case it is the posts title and excerpt. I did make use of the wpauto filter, for kicking the formatting tags, coming from wordpress. My css file looks like: 

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;
}

And i let this index.php be served out of a blogs subdirectory:

<?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>
Remember making use of the "more tag" inside your post, or the effect won't work. Good chances of a live preview is here: Floating around

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2019-04-15 08:00

Use margin-top on the floated box.

查看更多
0人赞 添加讨论(0) 举报
叛逆
4楼-- · 2019-04-15 08:01

Use the property align om the image tag ie, <img src="" alt="" align="left" />

But still i depends on where the img tag is placed in the html..

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

查看更多
0人赞 添加讨论(0) 举报
劫难
5楼-- · 2019-04-15 08:04

use Float propert in image and write text normally

Eg

<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)