图像对齐文本-CSS/HTML

我需要你的帮助 - 我有这个CSS和HTML;我需要将文本对齐到图像的右侧。但由于某种原因，他们不断推动图像的底部。我正在寻找的事实是将图像旁边的细节从左到右排列在一个网格中。图像对齐文本-CSS/HTML

这里是我的代码

<html> 
<head> 

<style type="text/css"> 
#container { font-size: 12px; font-family: 'Lucida Grande',Verdana,sans-serif; text-align: center; } 

#container a.name_link{ 
    text-decoration: none; 
    color: #8E190B; 
    font-weight: bold; 
    padding-bottom: 8px; 
} 

#image { width:100px; height:104px; border: 2px solid #e9e3dd; float:left;} 
#text { padding-top: 5px; padding-bottom:5px; } 

.horizontal_banner {float:left; margin: 2px; padding: 4px 2px 10px 10px; } 

</style> 
</head> 

<body> 

<div class="horizontal_banner"> 
    <div id="container"> 
    <a href="details.php?id=42"> 
    <img src="uploads/Lisa.jpg" id="image" title="Lisa"/></a> </div> 
    <div id="name_container"> 
    <a class="name_link" href="details.php?id=42">Lisa</a> </div> 

    <div id="text">Not available</div> 

    <div id="text">Not Specified</div> 
    <div id="text">Female</div> 

    </div> 


    <div class="horizontal_banner"> 
    <div id="container"> 
    <a href="details.php?id=23"> 
    <img src="uploads/Lucky.jpg" id="image" title="Lucky" /></a> </div> 
    <div id="name_container"> 
    <a class="name_link" href="details.php?id=23">Lucky</a> </div> 

    <div id="text">Employed</div> 

    <div id="text">25 Years</div> 

    <div id="text">Male</div> 

    </div> 
    </body> 
</html>

任何帮助将不胜感激。

来源

2011-09-25 Helen Neely

让一个jsfiddle ... – alt

为此，您需要为.horizontal_banner指定固定宽度。当我尝试你的例子时，200x为我工作。

来源

2011-09-25 22:24:45

谢谢，这是做的伎俩。 –

是这样的吗？ http://jsfiddle.net/CvZWG/

我给.horizontal_banner添加了新的规则，使它们向左浮动。此外，您在HTML中多次使用div上的text id。 ID应该是唯一的，如果你想多次使用它，你应该使用class而不是id。

来源

2011-09-25 22:25:11

谢谢，贾森的提示 - 将改变所有这些ID到课堂。你可以告诉我是新来的CSS :) –

根据文本的长短，您有多个选项。

然而，看着你的代码，我建议......你杀了所有的ID的，让他们班，解释不太愿意在多个ID的名称相同，这是发行数量1

第2期，浮动：在左边，因为它是一个块元素，并给它一个高度和宽度。给予浮动高度和宽度的任何东西是一种很好的做法，以便浏览器知道它的工作原理。不要忘记保证金和填充的清除，如果你还没有设置，你可能需要考虑一些reset.css规则。 http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

问题3，您可能需要尽可能将这些“文本”div正确地移动，尽管您可能想要考虑一个或这种情况，因为所有数据看起来都是相同的，并且会是同一个孩子类。 http://www.codingforums.com/showthread.php?t=186697

祝你好运。

来源

2011-09-25 22:30:34 Chrisdigital

图像对齐文本-CSS/HTML

回答

相关问题