Question

我有一张图片，我希望与文字内联。我无法解决如何在保持格式化的同时做到这一点，而不会像小提琴那样分割段落......

<style>
    .test1 img, .test1 p, .test1 h1, .test1 h2, .test1 h3{
        display:inline;
        vertical-align:top;
    }
    img{
        width:150px;
        height:150px;
    }
</style>
<div class="test1" align="left">
    <img src="">
    <h2>eLearning</h2>
    <h3>No one said work had to be boring.</h3>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>

https://jsfiddle.net/nxyLv9vm/2/

小提琴中的第一部分显示了我的问题，第二部分显示了文本的格式也应该如何显示在图像旁边。

对于记录

我可以通过将p，h2，h3标签封装在div中并使其成为内联来实现此功能，但我希望文本直接在图像下方流动全宽。

Answer 1

你在找这样的东西吗？

https://jsfiddle.net/kumiau/u98x2ttg/

我删除了内联css格式化并将图像浮动到左侧。

img{
  width:150px;
  height:150px;
  float: left;
}

内联IMG分割P标签

1 个答案: