问题描述:

I want to place the image and the 2 texts next to each other. With the first text being at the far left. The image being directly in the center. And the last text being at the far right. Here is what I currently have...

<body>

<h2><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h2>

<img src="website_art.png" height= "75" width= "235"/>

<h2><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h2>

</body>

How can I do this?

Thanks

网友答案:

You don't close the font element in the right place in your HTML code.

Besides, is a good practice to have the style in a external file (I talk about the CSS).

Change for this:

<body>
    <div class="container">
        <h2>MrEpicGaming4U</h2>
        <img src="Your url" height="75" width="235"/>
        <h2>The art of gaming</h2>
    </div>
</body>

Put these CSS rules:

h2 {
    font-family: "Verdana";
    color: #9C0;
}

.container > * {
    display: inline-block;
}
网友答案:
   <h2 style="float:left;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h2>
   <div style="float:left;"><img src="website_art.png" height= "75" width= "235"/></div>
   <h2 style="float:right;"><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h2>
   <div style="clear:both;"></div>
网友答案:

You don't "need" to add float right on the last item...

<h2 style="float:left"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h2>
<img  style="float:left" src="website_art.png" height= "75" width= "235"/>
<h2 style="float:left"><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h2>

...but you should clear them once you are done.

<hr style="clear:both";>
网友答案:

inline-block:

h2, img{display: inline-block;}

If you are sticking with float:left then just make the container div with overflow: hidden ...no need to add clear:both extra div...

Here are both examples:

http://jsfiddle.net/Riskbreaker/kAVQ3/2/

相关阅读:
Top