造型图像和一些文本

Question

我正在与其他人的造型合作，并且不能像他们设法那样得到东西。我试图让事情看起来像这个页面：

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

在右侧查看图像是如何很好的，表单元素在左侧。

我有这个页面，我正在搞乱并试图做类似的事情：

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

是否有一种简单的方法让我将图像放到最左边，并且要求该人登录的内容是在右边？

谢谢！

Answer 1

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

替换为

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内第一个.basic的宽度。将宽度更改为100%而不是450px

你应该可以从那里继续。

我还会将图像移动到自己的容器中并向右浮动，并将表单操作放在另一个容器中。另外，使用类和id进行样式化以便清理。

Answer 4

将div的宽度增加到845px。

向左浮动图像。

用于h3标签做样式

h3 {
   float: right;
  display: inline;

}

这将为您完成任务。

从HTML中删除空标记。