1

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

我喜欢这样做（样本 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;
}
4

3 回答 3

6

只需将图像浮动到左侧

img {
   float: left;
}

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

注意：永远不要忘记清除你的浮动......你也可能想把它包装在一个容器 div 中

休息 ：

你可以给一个你想浮动的 img 类，所以img{float: left;}你应该使用它而不是使用它，这样它就可以精确地定位图像，你也可以像Sam Carrington告诉你的那样img.class_name {float: left;}将文本包裹在p元素内，这样你就可以填充文字和样式...

演示小提琴

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 */
}
于 2013-02-08T11:20:55.557 回答
0

您应该始终将 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>
于 2013-02-08T11:26:05.843 回答
0 
#wrap .image img { float: left; width: 200px;}
于 2013-02-08T11:30:17.290 回答