html - 如何强制父 div 按子 div 宽度/填充/边距/框扩展?

标签 html css

我想用子 div 扩展父 div,但我不知道这是否可能以及如何做。

enter image description here

我准备了一个fiddle并包含一些代码。

CSS

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    max-width: 72em;
    margin: auto;
    padding: 1em;
}
div.one {
    background-color: red;
    width: 40%;
}
div.two {
    background-color: green;
    width: 120%;
}

HTML

<body>
    <div class="page">
        <div class="one">One</div>
        <div class="two">Two</div>
    </div>
</body>

最佳答案

解决问题的关键是使用 display:inline-block;

HTML

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    margin: auto;
    padding: 1em;
    display:inline-block;
}
div.one {
    background-color: red;
    width: 10em;
    display:inline-block;
}
div.two {
    background-color: green;
    width: 40em;
    display:inline-block;
}
<div class="page">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>

关于html - 如何强制父 div 按子 div 宽度/填充/边距/框扩展?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17291514/

相关文章:

javascript - 我如何使用 javascript 从表单中获取信息?

javascript - 使用 javascript 的 .innerHTML 将 html 插入网页

javascript - 如何使用一个 XSLT 文件中的变量到另一个 XSLT 文件

html - CSS 选择器向所有框添加一个 before 伪元素,但第一个和最后一个?

css - 哪些浏览器支持CSS :before { content: "x"; }

CSS margin-left 属性不存在?

javascript - 使 div 在图像/容器上居中

html - 特定文本字符可以更改行高吗?

javascript - 如何将一个 iframe 的 html 内容复制到另一个 iframe 包括 CSS?

css - 向 wordpress 添加新样式表