Image align with text -CSS/HTML_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-07 17:47 出处：网络

I need your help - I have this CSS and HTML; I need the text to align to the right of the image. But for some reason, they keep pushing to the bottom of the image. What I\'m looking for infact is to h

相关专题：css

I need your help - I have this CSS and HTML; I need the text to align to the right of the image. But for some reason, they keep pushing to the bottom of the image. What I'm looking for infact is to have the details next to the image in a grid from left to right.

Here's my code

<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="开发者_JS百科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>

Any help will be greatly appreciated.

To do so, you need to specify a fixed width to .horizontal_banner . 200x worked for me when I tried your example.

Something like this? http://jsfiddle.net/CvZWG/

I added new rules to .horizontal_banner to make them float left. Also, you're using the text id on divs multiple times in your HTML. IDs are supposed to be unique, if you want to use it multiple times you should use class instead of id.

You have a number of options depending on how long the text is.

However, looking at your code I would suggest... you kill all those id's and make them classes, the interpreter balks at multiple id's with the same name, that's issue number 1.

Issue 2, float: the to the left, since it's a block element, and give it a height and width. It's good practice to give anything that is floating an height and a width so the browser knows what it's working with. Don't forget clearance for margin and padding, you might want to consider some reset.css rules if you haven't set that up yet. http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Issue 3, you might have to go as far as floating those "text" divs right, although you might want to consider a or for this situation since all that data looks the same and will be a child of the same class. http://www.codingforums.com/showthread.php?t=186697

Good luck.