html - 子 div 和父 div 一样高

Question

我有一个 Bootstrap 元素，其中包含一些我继承的其他 CSS。我不想更改任何现有样式，但我想添加一个纯色子 div，它在顶部、左侧和底部边缘与其父级齐平，并且有一些像素宽(窄得多比 parent )。

我想保持完整的父类是:

.my-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.my-link {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}

我对如何构建 child 的天真理解让我认为 CSS 应该是这样的:

margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
width: 40px;
background-color: red;

但我仍然看到利润率。我尝试了几种更改填充的变体也没有效果。我看到的答案归结为 display:table-cell(无法实现)或 position:absolute，这使得子项出现在父项之外.

看起来这应该是一个简单的问题，但我没有思路。

Answer 1

显示:表格单元格；应该工作，但你可能需要有 display:table;并显示:表格行；

您需要从 .my-heading 中删除填充并将其移动到您的内容 div 中。

见下文。

.my-heading {
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: table;
}

.my-link {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  display: table-row;
}
.my-content {
    padding: 10px 15px;
    width: 100px;
    background-color: red;
    display: table-cell;
}
.my-content2 {
    padding: 10px;
    background-color: green;
    display: table-cell;
}

和html

<div class="my-heading">
    <div class="my-link">
        <div class="my-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, assumenda quis debitis aliquam aut dicta praesentium laboriosam eligendi placeat ipsa sint saepe vitae porro! Excepturi reiciendis illum at alias minima.
        </div>
        <div class="my-content2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid, eligendi, dolore nemo corporis iusto est assumenda cupiditate sapiente cumque incidunt excepturi ipsum nisi! Iure quisquam commodi nemo saepe rem autem minima inventore temporibus? Explicabo, reiciendis, ducimus, quasi alias nobis consectetur accusamus fugiat sed in sit vitae vel maiores itaque culpa magni voluptatum rem dicta est beatae ea. Adipisci, quis aliquam autem voluptas architecto quam asperiores ea ducimus provident harum laboriosam enim beatae ipsam tempore alias voluptatibus dignissimos doloremque recusandae a ullam aut error blanditiis odio labore reprehenderit dolore distinctio accusamus? Dignissimos, ipsam ea officiis nesciunt ipsum rem aut veritatis!
        </div>
    </div>
</div>

我已经将以上内容上传到 bootply http://www.bootply.com/3y7QfF2653