Question

我目前正在使用包含联系表单的网站。如果我可以使用谷歌地图作为背景，那将是很好的，但然后灰色而不是白页。

我尝试了一些事情，但结果却是这样：

正如您所看到的，我只能获得1/10的div以显示Google地图。

我尝试了什么：

<div id="tf-contact" class="text-center" >
<div class="map">
    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginwidth="0"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d79109.96871665918!2d5.295447749999999!3d51.711330000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6ee37ad3edd37%3A0x400de5a8d1e7c50!2s's-Hertogenbosch!5e0!3m2!1snl!2snl!4v1410603286022"
            style="border:0">
    </iframe>
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <div class="section-title center">
                    <h2>Neem gerust <strong>contact op</strong></h2>

                    <div class="line">
                        <hr>
                    </div>
                    <div class="clearfix"></div>
                    //not important for the question
                    </div>

                    <form>
                        //not important for the question
                    </form>
            </div>
        </div>

    </div>
</div>

所以我想要这样的事情：

CSS是：

/* Contact Section */
#tf-contact{
padding: 80px 0;
}

label {
float: left;
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
#tf-contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}

#tf-contact .form-control:focus {
border-color: inherit;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}

button.btn.tf-btn.btn-default {
float: right;
background: #FCAC45;
border: 0;
border-radius: 0;
padding: 10px 40px;
color: #ffffff;
text-transform: uppercase;
}

.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus {
 outline: thin dotted;
 outline: none;

}

Answer 1

好吧，我认为对你来说最好的选择就是去研究Z-Index。这样，您就可以将每个元素放在一个单独且不同的层上。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Google地图在html

1 个答案: