Question

我正在尝试创建一个包含3个以页面为中心的主要元素的标题。在3个主要div的两侧，我想添加另一个div，它将页面溢出一半的宽度。 enter image description here

像这样。两个红色div都是所示长度的两倍，但是溢出：隐藏会将它们切断。这很容易创建但是当我尝试添加蓝色差异的内容时，它们都会向下滑动 enter image description here

我不明白为什么会这样。此外，当我向边div添加一些内容时，所有内容都会重新回到原位 enter image description here

那么我想到只是添加一个;红色的divs让一切都处于适当的位置。哪个有效。然而，当我尝试通过添加填充顶部来垂直居中蓝色差异的内容时，红色差异会向下移动，原因我不知道 enter image description here

这是我的css

div.padded{
    padding-top:20px;
}
.header{
    width:100%;
    border:2px solid black;
    white-space:nowrap;
    overflow:hidden;
}
.leftExtend{
    width:25%;
    margin-left:-12.5%;
    background-color:red;
    display:inline-block;
}
.middle{
    width:25%;
    background-color:blue;
    display:inline-block;
}
.rightExtend{
    width:25%;
    background-color:red;
    display:inline-block;
}

和html

<div class="header">
    <div class="leftExtend">sometext</div>
    <div class="middle padded"><a href="#">aaa</a></div>
    <div class="middle padded"><a href="#">bbb</a></div>
    <div class="middle padded"><a href="#">ccc</a></div>
    <div class="rightExtend">sometext</div>
</div>

我创建了一个jsfiddle来证明问题。

为什么会发生这种情况，我做错了什么以及实现这种行为的正确方法是什么？

Answer 1

尝试将vertical-align: top;添加到div s：

.header div {
    vertical-align: top;
}

默认为基线，导致它们显示在底部。

JS Fiddle

css：带有垂直居中文本的溢出边div表现得很奇怪

1 个答案: