div内的文字不会换行

如此处所示：http://jsfiddle.net/EhnuZ/顶部组的文字较少，文字位于图像的右侧。底部组是相同的，只是它里面有更多的文字。但是，这会导致文本在图像下移动，而不是像我想要的那样进行换行。这怎么解决？我曾尝试过：div内的文字不会换行

white-space:normal; 
word-wrap: break-word; 
width:50%; 
max-width:50%;

来源

2012-08-08 Jack S.

您需要指定文本容器width，否则它会自动尝试是宽度的100％。

.text{ 
     vertical-align:top; 
     display:inline-block; 
     width: 30%; 
    }

来源

2012-08-08 17:02:00 Scillon

您是否试过在您的图像上使用float：left？

来源

2012-08-08 16:58:37 Maude

是制约其母公司的一段宽度，但在打印或在一个小窗口中显示时会导致其他问题。 – 2012-08-08 17:00:09

我能想到的最简单的事情就是将图片和文字放入表格中。例如： -

<table> 
     <tr> 
      <td> 
       <img src="http://i0.kym-cdn.com/entries/icons/original/000/007/263/photo_cat2.jpg"> 
      </td> 
      <td valign="top"> 
       <div class="text"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ligula ut mi laoreet viverra sit amet non dolor. Vivamus quis velit elit. Aenean dignissim porttitor lorem, ac ullamcorper quam porttitor molestie</p> 
       </div> 
      </td> 
     </tr> 
    </table>

来源

2012-08-08 17:01:47

表是不好的方法，应尽可能避免。只有几个原因[这里]（http://phrogz.net/css/WhyTablesAreBadForLayout.html） – Scillon 2012-08-08 17:04:40

很酷，你的解决方案绝对是可取的;我并没有真正考虑CSS方面，特别是'display：inline-block'属性设置......有点可以避免使用'table'。 – 2012-08-08 21:28:46

@Scillon我认为这里要提到的重要一点是*表格是布局*的一种不好的方法。你的评论可能会让新开发人员误以为*表不好是不好的;表格是显示表格数据时使用的确切工具。只是想我们应该澄清:) – dudewad 2015-03-26 23:59:30

没有在<p>或其包含的元素中的一个的宽度，没有理由为浏览器的呈现引擎，以防止元件从膨胀以填充它的容器。

你想要做的是通过设置就可以了width或max-width

来源

2012-08-08 17:02:47 jackwanders

div内的文字不会换行

回答

相关问题