Question

我希望我的图像包装文本对齐像这样

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

如果没有手动推杆，我该怎么办？（比如首先对齐文本，然后是图像和最终文本），因为我的网站的所有图像和文本都将从数据库中提取。

Answer 1

在图像中使用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>

Answer 2

在浮动框中使用margin-top。

Answer 3

使用属性对齐图像标记，即<img src="" alt="" align="left" />

但我仍然依赖于img标签在html中的位置..

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

Answer 4

我在wordpress循环中做了这个，在我的帖子中使用了“more tag”。当标签划分内容时，很容易让你随心所欲。在我的情况下，它是帖子标题和摘录。我确实使用了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从blogs子目录中提供：

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

请记住在帖子中使用“更多标签”，否则效果将无效。这里有很好的实时预览机会：Floating around

如何使用CSS将文本像某些报纸格式一样放在图像周围？

4 个答案: