作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法将两个 div 放在一起。第一个 div 包含一个表单,第二个 div 包含谷歌地图。我不知道哪里出了问题。
HTML:
<div id="wrapper">
<div id="first">[contact-form-7 id="116" title="Contact form"]</div>
<div id="second">
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3391.3063811555426!2d35.20240968523232!3d31.789398981281416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634ea0083%3A0x563ea54b03caa6a8!2sCompuskills!5e0!3m2!1siw!2sil!4v1488218811643" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#first {
width: 70%;
float:left;
}
#second {
width: 30%;
float:left;
#wrapper {
width: 100%;
overflow: hidden;
}
#first {
width: 70%;
float:left;
}
#second {
width: 30%;
float:left;
div.wpcf7 {
0;
margin: 0;
padding: 0;
}
div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
}
div.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
margin: 0;
padding: 0;
border: 0;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}
div.wpcf7-validation-errors {
border: 2px solid #f7e700;
}
.wpcf7-form-control-wrap {
position: relative;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
display: block;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
border: 1px solid #ff0000;
background: #fff;
padding: .2em .8em;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-display-none {
display: none;
}
div.wpcf7 .ajax-loader {
visibility: hidden;
display: inline-block;
background-image: url('../../images/ajax-loader.gif');
width: 16px;
height: 16px;
border: none;
padding: 0;
margin: 0 0 0 4px;
vertical-align: middle;
}
div.wpcf7 .ajax-loader.is-active {
visibility: visible;
}
div.wpcf7 div.ajax-error {
display: none;
}
div.wpcf7 .placeheld {
color: #888;
}
div.wpcf7 .wpcf7-recaptcha iframe {
margin-bottom: 0;
}
div.wpcf7 input[type="file"] {
cursor: pointer;
}
div.wpcf7 input[type="file"]:disabled {
cursor: default;
}
<div id="wrapper">
<div id="first">[contact-form-7 id="116" title="Contact form"]</div>
<div id="second">
<iframe style="border: 0;" src="https://www.google.com/maps/embedpb=!1m18!1m12!1m3!1d3391.3063811555426!2d35.20240968523232!3d31.789398981281416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634ea0083%3A0x563ea54b03caa6a8!2sCompuskills!5e0!3m2!1siw!2sil!4v1488218811643" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
最佳答案
您的 div
可能从样式表中的其他规则继承了一些填充或边框,这使得 div
的宽度加起来超过 100%。尝试设置 box-sizing: border-box
来解决这个问题。
或者,检查是否有任何继承的边距。
关于html - 如何将两个div放在一起?第一个 div 包含一个表单,第二个 div 包含谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42512436/
我是一名优秀的程序员,十分优秀!