Question

在没有负边距的情况下，最好的方法是制作两个div和两张图片：

http://img97.imageshack.us/i/divsandpictures.jpg/

Answer 1

从您的图片中我考虑了以下内容：

图像高度相同，但宽度可能不同
图像应该相互居中
文本不会包含多行
您希望文本始终在同一行开头

HTML：

<div class="item">
  <div class="image-wrapper">
    <img src="{image source}" alt="{alternate text}" />
  </div>
  <p>some text</p>
</div>

CSS：

.item { 
  overflow: hidden;
}

.image-wrapper { 
  width: 200px; /* or whatever is the max width of the images */
  height: 100px; /* or whatever is the height of the images */
  float: left;
  margin-right: 20px;
  text-align: center;
}

.item p {
  float: left;
  margin: 0;
  line-height: 100px;
}

带有演示颜色的工作fiddle。

Answer 2

HTML

<div>
    <img src="yourimage.jpg" align="left" />
    <p>some text</p>
</div>
<div>
    <img src="yourimage.jpg" align="left"" />
    <p>some text</p>
</div>

CSS

div { margin:0 0 20px 0; }
p { padding:4px 0 0 30px; display:inline-block }

我相信这是最好的方式。至少，一种最小的方式。

工作版：

http://jsfiddle.net/J28YS/2/

<强>修

http://jsfiddle.net/J28YS/6/

Answer 3

为什么没有负边距？

反正：

HTML：

<div class="div">
    <img src="grey.gif" width="60" height="60">

    <p>Some text</p>
</div>

<div class="div">
    <img src="grey.gif" width="60" height="60">

    <p>Some text</p>
</div>

CSS：

.div {
    overflow: hidden;/* Contain the floated image */
    margin-bottom: 20px;
}

.div img {
    float: left;
    margin-right: 30px;
}

请参阅http://www.pauldwaite.co.uk/test-pages/5297143/。

css用文本和两张图片定位两个div

3 个答案:

HTML：

CSS：