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才能将其显示在单元格内。你提到你想要在较大的盒子里面放置盒子，但是你需要弄清楚你想要将盒子放在更大的盒子里面的确切位置（例如盒子之间的小间隙，两者都完全适合大盒子的相同尺寸）

Answer 2

刚刚将inline-block改为inline-flex为您的内部div，看起来很不错。

.div-wrapper {
  border: 1px solid black;
  width: 200px;
  height:70px;
  margin: auto;
  margin-top: 10px;
  padding: 0;
}

.div-wrapper div {
  display: inline-flex;
  border: 1px solid black;
  width: 90px;
  height: 60px;
  text-align: center;
}

.div-wrapper div a {
  display: block;
  text-decoration: none;
}

<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>

Answer 3

只需解决这个问题，我不认为这里有任何解决方案可以解释问题存在的原因。只是加起来，问题是因为默认情况下 vertical-align设置为基线。

您需要做的是将 vertical-align设置为顶部

将其插入CSS：

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

解决方案链接：https://jsfiddle.net/Lnvgkfz3/

Answer 4

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;
}

Div元素行为不端

4 个答案: