请问为什么？？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
        padding:0px;
        margin:0px;
    }
    .header{
        background-color:black;
        color:white;
        width:100%;
        height:100px; 
    }
    .two{
        float:left;
    }
    li{
        display:inline-block;
        float:right;
        width:100px;
        line-height:100px;
        font-weight:700px; }
    
   
  </style>
</head>
<body>
  <div class="header">
      <div class="two">
          <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
      </div>
      <div class="four">
          <ul>
              <li>课程</li>
              <li>职业路径</li>
              <li>实战</li>
              <li>猿问</li>
              <li>手记</li>
          </ul>
        </div>
      </div>
      <div class="main">
         <div><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"></div>
         <div><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"></div>
         <div><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"></div>
      </div>
</body>
请问为什么我第一张图是默认右边？？？

hy_wang 2017-12-10

源自：CSS网页布局基础 2-7 编程练习

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2017-12-11 17:18:53

你好，1、图片本身有自带的2-4px的边距，可给父级设置固定高度，或者给图片设置display:block;来去掉，2、这并不能所是在一行吧，是盒子超出，把它挤走了，这块注意下，以后设置logo的设置规定下高度即可。

祝学习愉快~

收起回答

hy_wang 提问者 #1

非常感谢！

2017-12-11 17:20:47

好帮手慕糖 2017-12-11 15:46:50

你好，如下图，这里是图片导致的超出，所以可以给包裹图片的盒子设置高度，即tow元素。因为这个宽度的超出，把下面的图片挤开了，就到右边去了，你可以修改下，对比下区别。

祝学习愉快~

收起回答

提问者 hy_wang #1

老师，请问一下这个图片为什么进行多了4px高度，我测试了代码没有发现哪里有超出啊，为什么会多出4px高度

2017-12-11 16:45:39
提问者 hy_wang #2

以及请问老师div不是块级元素吗，这个图片怎么会和div.two在同一行中显示？

2017-12-11 16:50:28

好帮手慕糖 2017-12-11 10:40:46

你好，因为包裹logo的盒子高度超出导致的，建议：给.two 元素设置高度： height: 100px;，另图片要实现宽度100%，所以可给图片元素要设置width:100%;

祝学习愉快~

收起回答

提问者 hy_wang #1

请问老师哪里超出了，可以讲解的仔细点吗。我有点迷惑，我不是设置了父元素header高度为100 ，为什么子元素会超出？

2017-12-11 15:13:35
提问者 hy_wang #2

以及为什么高度超出图片就变为右边去了

2017-12-11 15:14:13