Question

如何在不移动图像下的其他文本的情况下水平对齐图像和文本

我喜欢这样做（示例XXXXX是一张大图）

XXXXXXXX  This is a big image.
XXXXXXXX  all text should not goes 
XXXXXXXX  down the image
XXXXXXXX

但问题是我的文字落在了图片上

XXXXXXXX  This is a big image.
XXXXXXXX  
XXXXXXXX  
XXXXXXXX
all text should not goes down the image

请帮助我。

这是我的代码

<div id = 'wrap'> 
   <div class='image'>
     <img src="/test/1.jpg" />
     This is a big image  all text should not goes down the image
   </div>
   <div class='image'>
     <img src="/test/2.jpg" />
     This is a big image  all text should not goes down the image
   </div>

</div>

我用过的CSS ......

#wrap {
   overflow: auto; 
   height: 300px; 
}

.image{ 
    border-top-style:outset;
}

#wrap > div > img {
    width : 80px;
     height : 70px;
     margin-left:5px;
     margin-top:5px;
     margin-bottom:5px;
     padding-bottom: 4px; 
     float:left;
    clear:left;
}

Answer 1

只需将图像浮动到左侧

img {
   float: left;
}

将图像向左浮动后会发生什么情况，它会在右侧创建一个空白区域，以便文本按照您想要的方式设置。

注意：永远不要忘记清除你的花车......你也可以将它包装在容器div中

休息：

您可以将类添加到要浮动的img中，而不是使用img{float: left;}，您应该使用img.class_name {float: left;}以便它将精确地定位图像，您也可以将文本包含在内部Sam Carrington的p元素告诉您，以便您可以填充文本并设置样式...

Demo Fiddle

HTML

<div class="wrapper">
    <img class="to_the_left" src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <p class="paragraph">Hi this is big long text I want to place it to the right of my image</p>
    <div class="clear"></div>
</div>

CSS

.wrapper {
    border: 1px solid #f00;
}

.to_the_left {
    float: left;
}

.clear {
    clear: both;
}

p.paragraph {
    padding-top: 30px; /* You can set accordingly */
}

Answer 2

你应该总是在语义元素中包含div中的文本 - 这样做的好处是允许你使用css将文本定位在一个唯一的容器中。

<div class='image'>
  <img src="/test/1.jpg" />
  <p class="sidebar">This is a big image  all text should not goes down the image</p>
</div>

Answer 3

#wrap .image img { float: left; width: 200px;}

垂直对齐图像和文本

3 个答案: