html - 在 div 内填充 div
问题描述
嘿伙计们,我目前正在学习 html 和 css 我只是想问一下我在 div 里面有一个 div 。我只希望外部 div 的背景颜色为蓝色,内部 div 距离外部 div 的顶部和左侧 50px。我的内部 div 的尺寸是 200px x 80px 但是当我尝试为内部 div 应用填充时它只是将其尺寸增加 50,而不是将其与外部 div 隔开,并保持粘在外部 div 的边缘。如果这可能是原因,我在内部 div 内也有一个 iframe。
HTML
.contact {
background-color: rgba(0, 102, 204,0.7);
width: 100%;
height: 300px;
z-index: 2;
padding: 50px;
}
.social {
background-color: white;
border-radius: 4px;
width: 150px;
height: 30px;
}
#fb {
float: left;
padding: 50px;
}
<div class="contact">
<div class="social">
<iframe id="fb" src="Somelink" width="200" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
解决方案
我对你的理解正确吗?这是你想要的吗?
.outer {
background-color: #00f;
padding: 50px;
display: inline-block;
}
.inner {
background-color: #f00;
width: 200px;
height: 80px;
}
.inner > * {
background-color: #fff;
}
<div class="outer">
<div class="inner">
<aside>This is your iframe or whatever</aside>
</div>
</div>
推荐阅读
- amazon-web-services - AWS EFS 上的客户端连接数?
- spring - 为什么 sortBy 的排序不同于 Kotlin 中的流排序?
- node.js - .env 为多个文件返回 undefined
- java - 以错误的顺序显示消息
- go - 文件不是 `goimports`-ed 与 -local somePath
- android - 如何仅以 10% 的增量调用 NotificationManager
- wordpress - 如何将动画 gif 作为特色图像添加到 woocommerce 产品中?
- r - R 数据框 - 全部转换
为空白(“”)字符列 - python - 有没有办法按两个元素对两个元素元组的列表进行排序,但其中一个元素是反向排序的?
- javascript - Discord.js 数据库从 .txt 发送同一行