Div元素行为不端

时间:2017-02-03 03:09:03

标签: html css css-position

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

4 个答案:

答案 0 :(得分:1)

问题在于您的CSS。特别是.div-wrapper div 您需要将显示设置从inline-block更改为inline-table才能将其显示在单元格内。你提到你想要在较大的盒子里面放置盒子,但是你需要弄清楚你想要将盒子放在更大的盒子里面的确切位置(例如盒子之间的小间隙,两者都完全适合大盒子的相同尺寸)

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

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

将其插入CSS:

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

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

答案 3 :(得分:0)

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