在浮动图像周围以最小列宽流动文本 [英] Flowing text with minimum column width around floated image

问题描述

我想要一种方法来防止流动文本的列变得太窄。例如，在HTML文本的一列中，左侧有一个图像浮动。正如预期的那样，文本在图像的右侧向下流动：

b
$ b

是一个块：

我正在试图找到一个简单而通用的方法。这是一个博客 - 我想能够添加图像和文本，也许添加一个类或粘贴一些标记（叹气），并使流程工作。我宁愿只用CSS和HTML来完成它，因为很难将JavaScript插入到博客文章中。我有几个方法（请参阅我的答案），但都不令人满意。你可以做得更好吗？

当您设置

因此，您需要添加换行符< br> 来产生换行符在文本中，但该行的垂直空间将保持为您提到的。 [还有一件事是水平滚动条，它会出现在如果你减少宽度
$ b

简介

使用 < table>< / table> 元素在这里有很多好处。 当您使用< table> element （如下），它会导致内容进入下一行。当剩余水平空间小于< table> 的宽度时，它将进入下一行并将内容向下推。

此外，水平滚动条不会出现在这种情况下，因为浏览器在它时不会显示< table> 没有任何内部元素或任何特定的高度或边界属性。

（不同的浏览器具有不同的行为，Mozilla Firefox不显示 table 元素与特定的边界属性，但谷歌浏览器。）

HTML： b
$ b

< img src =http://placehold.it/100x50alt =>
< table>< / table>
Lorem ipsum dolor sit amet ...


CSS：

  img {float：left; } 
 table {width：12em; } 
  

以下是 JSBin Demo 。

解决方案

作为纯粹的CSS方式，我使用 :: before 伪元素来创建一个行为与< table> HTML元素相似的元素。

HTML：

 < DIV> 
< img src =http://placehold.it/400x400alt => 
< p class =content> 
 <！ - 以下是内容...  - > 
< / p> 
< / div> 
  

CSS：

  img {float：left; } 
 
 .content：之前{
 content：''; 
 display：table; 
 width：10em; / *<  - 更改当前宽度大小* / 
} 
  

这是 JSBin演示 。

I would like a way to prevent columns of flowing text from becoming too narrow. For example, in a column of HTML text, there is an image floated to the left. Text flows down the right-hand side of the column around the image, as expected:

However, if the image is almost as wide as the column, then the text ends up being very narrow:

In this case I want the text to simply not flow past the image, but to drop below it as if the image were a block:

I am trying to find a simple and general way of doing this. It's for a blog - I want to be able to add the image and text, maybe add a class or paste in a bit of markup (sigh), and have the flow work. I would prefer to do it with CSS and HTML only because it's hard to insert JavaScript to the blog posts. I have a couple of methods (see my answers) but neither is satisfactory. Can you do better?

解决方案

When you set display: inline-block; to an element, the element will be flowed with surrounding content.

So you would need to add a line-break <br> to produce a line break in text, but the vertical space of the line will remains as you mentioned. [and one more thing happens is the horizontal scroll-bar which will appear if you decrease the width of the panel.]

Introduction

Using <table></table> element has a lot of benefits here.

When you use <table> element (as the following), it causes the content goes to the next line. And when the remain horizontal space gets lower than width of the <table>, it'll go to the next line and push the content down.

And also, horizontally scroll-bar won't appear in this case, because browsers won't display the <table> when it hasn't any element inside or any specific height or border properties.

(different browsers have different behavior, Mozilla Firefox doesn't display table element with a specific border property but Google Chrome does.)

HTML:

<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...

CSS:

img { float: left; }
table { width: 12em; }

Here is the JSBin Demo.

The Solution

As a pure CSS way, I used ::before pseudo-element to create a element which behaves like the <table> HTML element.

HTML:

<div>
  <img src="http://placehold.it/400x400" alt="">
  <p class="content">
    <!-- Here is the content... -->
  </p>
</div>

CSS:

img { float: left; }

.content:before {
  content: ' ';
  display: table;
  width: 10em;    /* <-- Change the current width size */
}

Here is the JSBin demo.

这篇关于在浮动图像周围以最小列宽流动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！