36

我希望文本和图像彼此相邻，但我希望图像位于屏幕的最左侧，我希望文本位于屏幕的最右侧。这是我目前拥有的......

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

我怎样才能做到这一点？

谢谢

4

3 回答 3

38 
img {
    float:left;
}
h3 {
    float:right;
}

jsFiddle 示例

请注意，您可能希望在clear:both您提供的代码之后的任何元素上使用该样式，以便它不会直接在浮动元素下方向上滑动。

于 2013-06-20T17:15:31.773 回答
7

你想为此使用css float，你可以直接把它放在你的代码中。

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

但我真的建议学习 CSS 的基础知识并将所有样式拆分为单独的样式表，并使用类。它会在未来帮助你。一个不错的起点是w3schools，或者以后可能是Mozzila Dev。网络（MDN）。

HTML：

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS：

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}
于 2013-06-20T17:18:23.897 回答
0

您可以使用垂直对齐和浮动。

在大多数情况下，您想要垂直对齐：中间，图像。

这是一个测试：http ://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

垂直对齐：基线|长度|子|超级|顶部|文本顶部|中间|底部|文本底部|初始|继承；

对于中间，定义为：元素放置在父元素的中间。

因此，您可能希望将其应用于元素中的所有元素。

于 2017-02-02T17:49:51.607 回答