zoukankan      html  css  js  c++  java
  • css中inline-block出现下移的情况

    在包裹层里嵌套的两个div设置display: inline-block时,正常情况下两个div会并排显示,如图

     
    代码:
    html:
    <div id="box">
        <div class="content1"></div>
        <div class="content2"></div>
      </div>
    

    css:

    #box {
          width: 300px;
          height: 300px;
          border: 1px solid red;
          padding: 20px;
          margin: 50px;
        }
    
        .content1 {
          display: inline-block;
          width: 100px;
          height: 100px;
          border: 1px solid blue
        }
    
        .content2 {
          display: inline-block;
          width: 100px;
          height: 100px;
          border: 1px solid blue
        }
    

    但是如果在其中一个div里面加上一些内容,神奇的事发生了,第一个div出现了下移,如图:


     
    image.png

    这块我只在html代码加了p标签

    <div id="box">
        <div class="content1">
          <p>11111</p>
        </div>
        <div class="content2"></div>
      </div>
    

    查阅了相关资料发现,在将元素display设置为inline-block的时候,元素即同时具有内联元素和块级元素的属性,既排列在同一行又可以设置宽高。

    对于内联元素,都具有vertical-align属性,那这里就牵涉到vertical-align的默认对齐方式。 它的默认方式是baseline,基线对齐。基线指内容的下边缘


     
    image.png

    第一个div里有元素,基线为元素也就是p元素的下边缘,第二个div内没有元素,默认的基线是margin下边缘,那么怎么解决这个问题,让div并排对齐?改变vertical-align默认对齐方式就可以了,在这里将其设置为top,效果如下:


     
     
  • 相关阅读:
    AcWing 1027. 方格取数 dp
    AcWing 1014. 登山 dp
    acwing 482. 合唱队形 dp
    LeetCode 1463. 摘樱桃II dp
    LeetCode 100. 相同的树 树的遍历
    LeetCode 336. 回文对 哈希
    LeetCode 815. 公交路线 最短路 哈希
    算法问题实战策略 DARPA大挑战 二分
    算法问题实战策略 LUNCHBOX 贪心
    AcWing 1100. 抓住那头牛 BFS
  • 原文地址:https://www.cnblogs.com/matd/p/13224496.html
Copyright © 2011-2022 走看看