html - div 背景小于其 css 内容(未指定 % 或 px 的宽度)

标签 html css

这是我的:

<div style="width: 100%; background: red; text-align: center">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Plain-M%26Ms-Pile.jpg/280px-Plain-M%26Ms-Pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;">
</div>

这就是我想要的:

enter image description here

我在 CSS 中尝试过边框、嵌入阴影和许多其他选项,但它们似乎都不适合我的目的。

有什么方法可以让 div 的背景小于内容而无需指定其高度?

最佳答案

添加另一个 div 即可;

<div style="width: 100%; text-align: center">
  <div style="width:100%;height:100px;position:absolute;left:0;top:45px;background:red;z-index:-1;"></div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Plain-M%26Ms-Pile.jpg/280px-Plain-M%26Ms-Pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;">
</div>

关于html - div 背景小于其 css 内容(未指定 % 或 px 的宽度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17823532/

相关文章:

Javascript:关于 elem.closest() 的逻辑

javascript - 浏览器视口(viewport)外的模态弹出窗口

jQuery 克隆 |

javascript - Jquery .click 功能不起作用

javascript - 未知的 AngularJS 错误(我是初学者)

javascript - 如何在 IE 中将鼠标悬停在图像上时删除下划线?

javascript - 改变路由时如何切换React组件的CSS样式?

html - CSS 宽度 : inherit issue

android - 如何在 Android webview 中显示印地文字体

使用 ttc 文件的 CSS 字体