div标签

Question

我想将地图放在地址和联系我们表格之间。现在显示地图 在联系表格上方。 Demo

我想在地址'A'和联系表单'c'之间显示地图'm'。

@charset "utf-8";
 body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: #82CAFA;
  font: normal 12px/1.5em"Liberation sans", Arial, Helvetica, sans-serif;
  background: #f3f3f3 url(../images/) repeat-x center top;
  background-color: #E3F2FF;
}
html,
.main {
  padding: 0;
  margin: 0;
}
.main {
  background: url(../images/header_bg.jpg) no-repeat center top;
}
.clr {
  clear: both;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 0;
  line-height: 0;
}
h2 {
  margin: 8px 0;
  padding: 8px 0;
  font-size: 26px;
  font-weight: normal;
  color: #343537;
  text-transform: uppercase;
  border-bottom: 2px solid #c8c8c8;
}
p {
  margin: 8px 0;
  padding: 0 0 8px 0;
}
a {
  color: #3183bf;
  text-decoration: underline;
}
.header,
.content,
.menu_nav,
.fbg,
.footer,
form,
ol,
ol li,
ul,
.content .mainbar,
.content .sidebar {
  margin: 0;
  padding: 0;
}
.header {} .header_resize {
  margin: 0 auto;
  padding: 0;
  width: 960px;
}
.logo {
  padding: 0 0 0 20px;
  float: none;
  float: left;
  width: auto;
  height: 104px;
}
h1 {
  margin: 0;
  padding: 24px 0 0;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.2em;
  text-transform: none;
  letter-spacing: 1px;
}
h1 a,
h1 a:hover {
  color: #efeeee;
  text-decoration: none;
}
h1 span {} h1 small {
  display: block;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: normal;
  text-transform: none;
  color: #efeeee;
}
.menu_nav {
  margin: 0;
  padding: 11px 0 0 24px;
  height: 45px;
}
.menu_nav ul {
  list-style: none;
  padding: 0;
  height: 50px;
  float: left;
}
.menu_nav ul li {
  margin: 0;
  padding: 7px;
  2px 0 0;
  float: left;
  background: url(../images/split.gif) no-repeat right center;
}
.menu_nav ul li a {
  display: block;
  margin: 0;
  padding: 7px 24px;
  font-size: 14px;
  line-height: 19px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
.menu_nav ul li.active a,
.menu_nav ul li a:hover {
  text-decoration: none;
  color: #fff;
}
.slider {
  margin: 0 0 20px;
  padding: 10px;
  background: #fff;
}
.content {
  padding: 0px;
}
.content_resize {
  margin: 0 auto;
  padding: 24px 0 40px;
  width: 960px;
}
.content .mainbar {
  margin: 0;
  padding: 0;
  float: right;
  width: 300px;
}
.content .mainbar h2 {
  margin-bottom: 0;
  padding-bottom: 8px;
  font-size: 26px;
  line-height: 1.2em;
  color: #212121;
}
.content .mainbar div.img {
  padding: 0 0 12px;
  float: left;
}
.content .mainbar img {} .content .mainbar img.fl {
  margin: 0;
  border: 1px solid #dedede;
}
.content .mainbar .article {
  margin: 0 0 80px;
  padding: 6px 20px;
}
.content .mainbar .post_content {} .content .mainbar .post_content strong {
  color: #6d6d6d;
}
.content .sidebar {
  padding: 0;
  float: left;
  width: 260px;
}
.content .sidebar .gadget {
  margin: 0 0 12px;
  padding: 6px 20px 24px;
}
.content .sidebar h2 {
  color: #212121;
}

<div class="content">

  <div class="content_resize">

    <div class="mainbar">
      <div id="map-canvas" style="width:500px;height:350px;border:1px solid black;"></div>
      <div class="demo">

        <h3 style="color:black;">Contuct Us</h3>
        <form method="POST" autocomplete="off">
          <div>
            <input type="text" name="name" placeholder="NAME" required>
          </div>
          <br>
          <div>
            <input type="text" name="email" id="email" placeholder="E-MAIL" onblur="javascript:myFunction(this.value);" required>
          </div>
          <br>
          <div><span id="error" style="color: Red; display: none"></span>
            <input type="text" name="phone" placeholder="phone" onkeypress="return IsNumeric(event);" ondrop="return false;">
          </div>
          <br>
          <div>
            <textarea name="message" placeholder="MESSAGE" required></textarea>
          </div>
          <br>
          <br>
          <br>
          <div>
            <input type="submit" name="send" value="SEND">
          </div>
        </form>

        <div class="clr"></div>

        <div class="post_content">



        </div>
        <div class="clr"></div>

      </div>

    </div>
    <div class="sidebar">
      <div class="demo">
        <h4 class="star"><span>sample</span>Technologies</h4>
        <div class="clr"></div>
        <p>
          No 242, VR STREET,
          <br>address,
          <br>address1,
          <br>area,
          <br>sample.
          <br>
          <br>info@sample.com


          <br>Tel: 9995432702,9942564712
          <br>
        </p>

      </div>

    </div>
    <div class="clr"></div>
  </div>

Answer 1

你可以将所有三个div浮动并按A-> M-> C的顺序放置，只是确保它们不会超出页面的宽度。

.a { float: left; }

Answer 2

您应该将DOM中元素的顺序更改为：

<div>
    <div class="sidebar"></div>
    <div id="map-canvas"></div>
    <div class="mainbar"></div>
</div>

并且还应用此css：

.content_resize {
    margin:0 auto;
    padding:24px 0 40px;
    width:1092px; //260 + 500 +(2px borders) + 300
}

.sidebar, .mainbar, #map-canvas {
    float: left;
}

working fiddle