设置图像和一些文本的样式

Question

我正在与别人的造型合作，但无法得到他们设法得到的东西。我试图让事情看起来像这个页面：

http://www.comehike.com/ Outdoors/parks/add_trailhead.php

看看图像如何很好地位于右侧，而表单元素位于左侧。

我正在弄乱这个页面并试图制作类似的页面：

http://www.comehike。 com/account/member_home.php

有没有一种简单的方法可以使图像转到最左侧，而要求用户登录的内容位于右侧？

谢谢！

Answer 1

首先更改 .basic 中第一个 div 的宽度。将宽度更改为 100% 而不是 450px

您应该可以从那里继续。

我还将图像移动到它自己的容器中并向右浮动，然后将表单操作放入另一个容器中。另外，利用类和 id 进行样式设计以清理内容。

Answer 2

以下是如何充分利用浮动元素：

HTML：

<div class="container">
  <div class="form">
     <form>....</form>
  </div>
  <div class="leftImage">
    <img src="img.jpg" />
  </div>
  <div class="clear"></div>
</div>

CSS：

.container {
   width: 800px;
}
.container .form {
   width: 500px;
   float:left;
}

.container .leftImage {
   width: 250px;
   float:left;
}

.clear {
   clear:both;
}

Answer 3

将 div 替换为 width: 450px 为 width: 100%，然后将子 H3 float: left

Answer 4

将 div 的宽度增加到 845px。

将图像浮动到左侧。

对于 h3 标签进行样式设置

h3 {
   float: right;
  display: inline;

}

这将为您完成任务。

从 HTML 中删除空标签。