将图片和文字放在html页面中

Question

我有简单的页面，里面有文字和图片。像这样： HTML

<p>TEXT</p>
<p>TEXT1</p>
<div id='image'></div>
<p>text2</p>

CSS

div#image
{
    height: 150px;
    width: 150px;
    background: url("../image/image.png") no-repeat 0 0; 
    position: absolute;
    z-index: 2;
    left: 1210px;
    top: 650px;

}

这在不同的浏览器中看起来不同。所以这是不好的方式。图像应该靠近文本。是否可以相对设置image和p的div？

与

类似

更新根据回答： CSS

div.imageWithTexts
{
  display: inline-block;
  width: 30%;
  margin: 1%;
  vertical-align: top
}
div.imageWithTexts img
{
width:100%
}

HTML

<div class='imageWithTexts'>text</div>
<div class='imageWithTexts'><img></img></div>
<div class='imageWithTexts'>text</div>

看起来像

Answer 1

以下是根据您的图片执行所需操作的方法

div {
  display: inline-block;
  width: 30%;
  margin: 1%;
  vertical-align: top
}
img {
  width: 100%
}

<div>
  <img src="http://t2.ftcdn.net/jpg/00/20/03/43/400_F_20034366_DPxCA1ryMUc73AcDi3u0WU6HUX94i8Rl.jpg " />
</div>
<div>test test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test test</div>
<div>
  <img src="http://t2.ftcdn.net/jpg/00/20/03/43/400_F_20034366_DPxCA1ryMUc73AcDi3u0WU6HUX94i8Rl.jpg " />
</div>

请参阅整页结果here

OP新代码的更新答案：

该代码段仍有效：

div.imageWithTexts {
  display: inline-block;
  width: 30%;
  margin: 1%;
  vertical-align: top
}
div.imageWithTexts img {
  width: 100%
}

<div class='imageWithTexts'>text</div>
<div class='imageWithTexts'>
  <img src="http://t2.ftcdn.net/jpg/00/20/03/43/400_F_20034366_DPxCA1ryMUc73AcDi3u0WU6HUX94i8Rl.jpg " />
</div>
<div class='imageWithTexts'>text</div>

Answer 2

根据您发布的第一张图片，如果您想将img verticaly居中，可以使用vertical-align css属性。

＆＃13;

＆＃13;

.row div{
    
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

img {
    width: 100%;
    background: black;
}

＆＃13;

<div class="row">
    <div>
      <img src="yourImage1.jpg" />
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel molestie mi. Maecenas pulvinar nibh orci, vel volutpat nulla suscipit quis. Suspendisse felis augue, placerat nec neque sit amet, suscipit molestie odio. Aliquam lorem leo, semper a libero non, luctus tristique tortor. Maecenas pretium a ligula in semper.
    </div>
    <div>
      <img src="yourImage2.jpg" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在我的情况下，内联块通过填充或其他东西重叠。这不是我自己的设计，所以我不得不把<img align='left' src='path/image.png'>放在左边。