html和CSS格式

Question

我是Web开发的新手，无法在页面上正确设置元素的格式。 该网站是使用html5 / css3开发的，我试图使“欢迎”显示在左边，图像框在右边，然后我的帐户/更新文本在右边。 请看图片。

到目前为止，我尝试过的所有操作要么导致左侧的所有操作合理化，要么导致元素出现在单独的行中。

感谢您的帮助。

谢谢克里斯

Answer 1

这应该可以帮助您入门：

http://jsfiddle.net/Eric/u5xvt/

---

的HTML

<div class="controls">
    <img src="http://placehold.it/100x100" />
    <span>My Account</span>
    <a>Update</a>
</div>
<p>Welcome,<br /> Chris</p>

的CSS

.controls {
    float: right; /* push it to the right */
    width: 200px;
    background: #FFe0c0; /* Just so you can see what is going on */
    padding: 5px;
}
.controls img {
    float: left; /* push it to the left */
    margin-right: 5px;  
}
.controls span, .controls a{
    display: block;
    line-height: 50px;
}

Answer 2

CSS的实现方法是使用float属性。

<div class="Header">
    <div class="Welcome"></div>
    <div class="Image"></div>
    <div class="MyAccount"></div>
    <div class="clear"></div>
</div>
<div class="Body">
    ...
</div>
...

以及CSS：

.Welcome { float: left }
.Image { float: right }
.MyAccount { float: right }
.clear { clear: both }

clear:both部分的目的都是使Header扩展其内容-否则，Welcome，Image和MyAccount实际上会出现在Body内容的顶部。

看看这个很棒的教程： http : //css.maxdesign.com.au/floatutorial/

Answer 3

您可以尝试设置float：left以获得类似于布局的列。 在CSS3中，也许http://intensivstation.ch/files/css3/columns.html也可以帮助您

Answer 4

一种方法是将元素右包装在一个向右浮动的div中。 在该div中，您希望将图像显示为块元素并将其向左浮动。

Answer 5

没有看到代码示例，我只能尝试提供帮助。 我建议将所有元素包装在header标签中，然后执行text-align:left; 。 然后，从理论上讲，但是将img浮动到右侧，它应该全部显示在一行上。 代码发布后，我可以对其进行进一步测试。