How to put text float around image like some newsp

2019-04-15 07:11发布

问题:

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.

回答1:

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>


回答2:

Use margin-top on the floated box.



回答3:

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



回答4:

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