Question

为什么＆＃34;输入状态＆＃34; div块在其父母中得到了抵消。

我确实尝试在Web检查器中切换其所有css属性，似乎无法修复偏移量。它来自哪里？

请看一下这个演示：http://jsfiddle.net/pengyanb/Lfvnr9y1/

＆＃13;

std::experimental::filesystem

＆＃13;

var offset = null;
$('#blog3 .blog-grid li').hover(
    function () {
        //get .content-box top position
        offset = $(this).find(".content-box").offset().top - $(this).find(".content-box").parent().offset().top;

        // darken the box
        $(this).find(".content-box").css("background-color", "rgba(0,0,0,0.5)").animate({
            queue: false,
            duration: 500
        });

        // initialize position
        $(this).find(".content-box").css("top", offset);

        // expand the content div
        $(this).find(".content-box").stop(true,true).animate({
            top: 0,
        }, {
            queue : false,
            duration : 500
        });

        $(this).find("p").fadeIn("slow");
        $(this).find(".read-more").stop(true,true).fadeIn("slow");
    }, 
    function () {
        $(this).find(".content-box").css("background-color", "transparent").animate({
            queue: false,
            duration: 500
        });

        $(this).find(".content-box").stop(true,true).animate({
            top: offset + 'px',
        }, {
            queue : false,
            duration : 500
        });

        $(this).find("p").stop(true,true).fadeOut("slow");
        $(this).find(".read-more").stop(true,true).fadeOut("slow");
    }
);

＆＃13;

我在网络检查器中切换了所有的css属性，

Answer 1

因为内联元素的vertical-align属性默认为baseline。只需将其更改为顶部：

.status_tab {
    display: inline-block;
    width: 48%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 10px 10px 10px black;
    font-family:'MS sans serif, Fallback, sans-serif';
    text-shadow:0 0 0 !important;
    text-align: center;
    line-height: 40pt;
    background-color:green;
    border:1px blue solid;
    vertical-align:top;
}

<强> jsFiddle example

Answer 2

从.containing_tab

中删除高度

＆＃13;

.containing_tab {
    width: 100%;
    margin-bottom: 20pt;
    border: 1px red solid;
}
.status_tab {
    display: inline-block;
    width: 48%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 10px 10px 10px black;
    font-family:'MS sans serif, Fallback, sans-serif';
    text-shadow:0 0 0 !important;
    text-align: center;
    line-height: 40pt;
    background-color:green;
    border:1px blue solid;
}
.middle_padding {
    display: inline-block;
    width: 1%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border:1px blue solid;
}

＆＃13;

<div class="containing_tab">
    <div class="status_tab">Input 1 Status</div>
    <div class="middle_padding"></div>
    <div class="status_tab">Input 2 Status</div>
</div>

＆＃13;

html div在父div中垂直偏移，为什么

2 个答案: