Question

我有一个我继承的其他CSS的bootstrap项目。我不想改变任何现有的样式，但是我想在顶部，左边和底边添加一个与其父级齐平的纯色子div，以及一些像素宽（更窄）而不是父母。）

我想保持完整的父母课程是：

.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;
}

我对如何构建孩子的天真理解让我觉得CSS应该是这样的：

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

但我仍然看到利润。我已经尝试了几种变化填充也没有效果。我已经看到答案可归结为display:table-cell（无法做到这一点）或position:absolute，这会使孩子出现在父母之外。

这似乎应该是一个简单的问题，但我没有想法。

Answer 1

或者您可以使用height: inherit;

示例http://jsfiddle.net/j5umnnLd/ ofc如果您在父级中设置高度，则可能需要display : block或display : inline-block取决于您的内容/元素类型

Answer 2

显示：表细胞;应该工作但你可能需要显示：table;并显示：table-row;

您需要从.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

Answer 3

让孩子成为一个绝对定位的元素，并给父母一个亲戚的位置，以便它正确地锚定孩子。然后使用CSS属性left，bottom，top将孩子移到边缘。

儿童div和父母一样高

3 个答案: