Question

我喜欢瘟疫之类的CSS。

我有一个表头，内联有几个表格单元格。这完全有效，直到我开始尝试将图像添加到其中一个单元格，这会导致div的高度延长，但我完全不知道为什么。

Example of blank table cells working perfectly.

Example of the demon that has been haunting me all day.

.header {
    display: table;
    width: 100%;
    background: white;
    border-bottom: 2px solid #eeeff3;
    .burger-menu {
        width: 75px;
        margin-left: auto;
        margin-right: auto; 
        background: url("https://s23.postimg.org/o8wb4i5u3/1484768142_menu_alt.png");
        background-size: 30px 30px;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        cursor: pointer;
        text-indent: 0px;
    }
}

.outer {
    display: table;
    vertical-align: top;
    position: relative;
    height: 100%;
    width: 100%;
}

.outer-icon {
    display: table-cell;
    position: relative;
    height: 75px;
    width: 5%;
    overflow: hidden;
    border-right: 2px solid #eeeff3;
    img {
        height: 100%;
    }
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.search-bar {
    display: table-cell;
    vertical-align: top;
    width: 80%;
    input {
        height: 75px;
        border: 0;
        padding: 0;
        width: 100%;
        border-right: 2px solid #eeeff3;
    }
}

.inner {
    width: 75px;
    margin-left: auto;
    margin-right: auto; 
}

有人能把我从痛苦中解救出来吗？

Answer 1

我不知道这是否会解决所有问题，但display add-friend上的.add-friend { background-image: url(https://placeimg.com/75/75/face); width: 75px; height: 75px; display: inherit; <- this here thingy }似乎可以改善一切：

RequestFuture.get()

https://codepen.io/anon/pen/zNNdYw

Answer 2

我认为你不想在.outer-icon上设置一个明确的高度，因为你用它包装了很多元素，并且应该让内部内容设置高度。

.outer-icon {
  height: 75px; // remove this line!!!
}

然后将汉堡包菜单设置为其相对父div的绝对值。

.burger-menu {
  position: absolute;
  left: 20px;
  top: 25px;
}

干杯

Answer 3

从height移除.outer-icon。我不知道将height应用于表格单元格是个好主意。在vertical-align: middle;和.search-bar上设置.outer-icon。

图像导致表格单元格高度延长

3 个答案: