Question

我有一个使用Google地图的PHP和HTML代码，我有一个表单，其中包含一些字段，用于获取用户输入并返回连接到数据库的结果。

问题是我想在Google地图旁边设置表单的位置。

我不知道如何使用CSS。

在这里看起来如何：

/* Always set the map height explicitly to define the size of the div
           * element that contains the map. */

#map {
  height: 400px;
  width: 800px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#form {
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  width: 550px;
  height: 450px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 24px;
  font-weight: bold;
  color: #09C;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

[![enter image description here][1]][1] code: =====
<html>

<head>
  <title>Custom Markers</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX&callback=initMap"></script>

  < /head>

    <body>
      <div id="map">
      </div>
    </body>

Answer 1

您可以在float: left;上使用#map或使用display: inline-block;

也许你应该看看W3Schools来获得css的基础知识。

你是如何在问题的标题中说的：如何设置相对位置...

使用position: relative;

Answer 2

我建议你使用像bootstrap这样的响应式框架。但这是简单的css解决方案。

.wrapper {
clear: both;https://i.stack.imgur.com/Le3k5.png
display: block;
content: "";
width: 100%;
}
#map {
float: left;
height: 400px;
width:800px;
}
#form {
float: left;
width: calc(100%-800px);
}

Answer 3

将两个元素放在容器中并定义宽度，使它们彼此相邻。

<div id="container">
    <div id="map"></div>
    <div id="form"></div>
</div>

在css中，你可以这样：

#container {
 display: flex
}

#map { 
width: 60%;
}

#form {
width: 40%;
}

Answer 4

您可以轻松使用flexbox在同一容器中对齐两个框。适应您的需求。

示例

https://jsfiddle.net/L15Lr2a4/

<强> HTML

<div class="container"> <div class="left"> Left </div> <div class="right"> Right </div> </div>

<强> CSS

.container { display: flex; width: 100%; } .container div { flex: 1; } .left { background-color: orange; } .right { background-color: tomato; }

如何设置div相对于另一个的位置

4 个答案: