css:子元素设置display:inline-block出现的问题

问题一


<html>
<head>
  <title>测试title>
  <style type="text/css">
  #div {
      
    width: 300px;
    height: 300px;
    background: burlywood;
  }

  #div1 {
      
    width: 150px;
    height: 150px;
    display: inline-block;
    background: orange;
  }

  #div2 {
      
    width: 150px;
    height: 150px;
    display: inline-block;
    background: skyblue;
  }
  style>
head>

<body>
  <div id="div">
    <div id="div1">div>
    <div id="div2">div>
  div>
body>

css:子元素设置display:inline-block出现的问题_第1张图片
效果是这样的,我们发现给父元素设置了 300px,两个子元素也是 150px,但是却换行了。那么如何改呢?只需要给父元素加上 font-size: 0;,就会正常显示
css:子元素设置display:inline-block出现的问题_第2张图片

问题二

html>

<html>

<head>
  <title>测试专用模板title>
  <style type="text/css">
  #div {
      
    width: 500px;
    height: 300px;
    background: burlywood;
  }

  #div1 {
      
    width: 150px;
    height: 150px;
    display: inline-block;
    background: orange;
  }

  #div2 {
      
    width: 150px;
    height: 150px;
    display: inline-block;
    background: skyblue;
  }
  style>
head>

<body>
  <div id="div">
    <div id="div1">测试测试测试测试测试测试测试测试测试测试div>
    <div id="div2">测试div>
  div>
body>

html>

css:子元素设置display:inline-block出现的问题_第3张图片
我们发现两个子元素并没有水平对齐,那么应该怎么改呢?
答:给两个子元素都设置 vertical-align: top; 就可以正常了
css:子元素设置display:inline-block出现的问题_第4张图片

你可能感兴趣的:(css)