html - Div 元素行为不当

Question

当我的第一个内部 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>

我的CSS代码:

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

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

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

链接到div的图片:

https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0

Answer 1

问题出在您的 CSS 上。特别是 .div-wrapper div您需要将显示设置从 inline-block 更改为 inline-table 以将其放入单元格中。你提到你想要大盒子里面的盒子，但你需要澄清你希望内盒子如何准确地放置在大盒子里面(例如:盒子之间的小间隙，两者都完全适合大小相同的大盒子)