Html Div元素行为异常

当我的第一个内部div有一个长的链接文本时，我的第二个内部div位置被奇怪地调整了。如何修复它

我的html代码：

<div class='div-wrapper'>
    <div class='inner-div1'>
        <a href="#">This is a long link</a>
    </div>
    <div class='inner-div2'>
        <a href="#">Link 2</a>
    </div>
</div>

链接到div的图片：

---

问题在于CSS。特别是

.div包装器div

---

您需要将显示设置从

inline block

更改为

inline table

，以将其放入单元格中。你提到你想把盒子放在大盒子里，但你需要澄清你到底想把内盒子放在大盒子里的方式（例如：盒子之间的小间隙，两个盒子完全适合大小相等的大盒子）

刚刚将内部

div

的

inline block

更改为

inline flex

，看起来不错

.div包装器{
边框：1px纯黑；
宽度：200px；
高度：70像素；
保证金：自动；
边缘顶部：10px；
填充：0；
}
.div包装器div{
显示：内联flex；
边框：1px纯黑；
宽度：90px；
高度：60px；
文本对齐：居中；
}
.div包装器div a{
显示：块；
文字装饰：无；
}

---

只要解决这个问题，我认为这里没有任何解决方案可以解释问题存在的原因。总而言之，这个问题是因为默认情况下，垂直对齐设置为基线

您需要做的是将垂直对齐设置为顶部

将其插入CSS：

.div-wrapper div {
    vertical-align: top;
}

链接到解决方案：

CSS中的小更改

    .div-wrapper {
    border: 1px solid black;
    width: auto;
    height:70px;
    margin: auto;
    margin-top: 10px;
    padding: 0;
}

.div-wrapper div {
    display: inline-block;
    border: 1px solid black;
    width: 190px;
    height: 60px;
    text-align: center;
}

.div-wrapper div a {
    display: block;
    text-decoration: none;
}

---

哇，你太棒了，太棒了……）没问题：）。确保宽度和高度不使用

px

单位。它的设计通常很糟糕，因为它在所有屏幕分辨率下都不好看。使用Google Chrome的inspect and play，在CSS属性所在的右侧使用

%

值也将在不使用

dispaly:inline table

的情况下解决此问题。您好，再次需要您的帮助。我想使用内部div中的行高度，使整个内部div可单击并垂直对齐单词，但它再次破坏了整个内容。你知道如何解决这个问题吗。提前谢谢..嗨。谢谢你接受我的回答：）。您可以尝试将

div

标记包装在锚定标记

中，并在div标记之间写入文本。您好，谢谢，这也很有效。但是，如果我想在内部div中使用60像素的行高，使整个div可以点击并垂直对齐单词，该怎么做呢？不知怎的，它又把事情搞砸了1.我需要看看你面临的问题。

    .div-wrapper {
    border: 1px solid black;
    width: auto;
    height:70px;
    margin: auto;
    margin-top: 10px;
    padding: 0;
}

.div-wrapper div {
    display: inline-block;
    border: 1px solid black;
    width: 190px;
    height: 60px;
    text-align: center;
}

.div-wrapper div a {
    display: block;
    text-decoration: none;
}