0

我想将图像和 2 个文本并排放置。第一个文本在最左边。图像直接位于中心。最后一个文本在最右边。这是我目前拥有的...

<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>

我怎样才能做到这一点？

谢谢

4

4 回答 4

6

您没有在 HTML 代码的正确位置关闭字体元素。

此外，将样式放在外部文件中是一个很好的做法（我谈论的是 CSS）。

为此改变：

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

放置这些 CSS 规则：

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

.container > * {
    display: inline-block;
}
于 2013-06-20T17:46:08.407 回答
1

您不需要“需要”在最后一项上添加浮动...

<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>

...但你应该在完成后清除它们。

<hr style="clear:both";>
于 2013-06-20T17:47:59.593 回答
0

内联块：

h2, img{display: inline-block;}

如果您坚持使用 float:left则只需使用overflow: hidden制作容器 div ...无需添加clear:both额外 div ...

以下是两个示例：

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

于 2013-06-20T17:45:54.143 回答
0 
   <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>
于 2013-06-20T17:42:38.723 回答