浮动标签的小问题

最新推荐文章于 2024-05-15 22:14:33 发布

跡部

最新推荐文章于 2024-05-15 22:14:33 发布

阅读量147

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/DINGHHJIBU/article/details/107727208

版权

  7月31日在上关于浮动标签的课时，出现了一个小问题，
   当我在写一个简单的浮动标签时，写了如下代码：
   在CSS内联样式里写了
 


   <style>
     div.outer{margin:0 auto;
                   width:1090px;
                   height:380px;}
      div.outer div{
           float:left;
           }
      div.left{
        width:690px;
        height:380px;
        border:1px solid green;
        margin-right:10px;
        background-color: green;}
      div.right{
        
        width:390px;
        height:380px;
        border:1px solid red;
        background-color: red;   
    }
  
</style>

在body写了

<body>
<div class="outer">
    <div class="left"> div1</div>
    <div class="right"> div2
        <div></div>
        <div></div>
    </div>
</div>

我刚开始的把这个代码反复看了好几遍都没有发现问题，但这个代码一直显示这个样子

在这里插入图片描述

但根据这个代码应该是显示这个样子的
正确的代码效果后面听到老师说另一个代码时，老师也出现了类似的问题，上这种情况如果代码没有写错，就是空间的问题，他已经没有足够的空间分给另一个，就会出现上不去的情况，我听到之后就去检查我的代码，发现高度一样，宽度也设得刚刚好，为什么会上不去？

再认真的看了几遍之后发现是边框的问题，我之前为了方便看到自己是页面布局，会下意识的给每个元素设置边框，这样结构会更加清晰，但在这个就是因为边框的那4px，而我又把width设得满，导致给第二个分配的空间少了4px,空间不足才出现这种情况。

虽然这是一个很小的问题，很容易被人忽略，后果可能就是这个代码你想要的结果出不来，今后都要注意空间的分配问题。

跡部

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动标签的小问题

7月31日在上关于浮动标签的课时，出现了一个小问题，当我在写一个简单的浮动标签时，写了如下代码：在CSS内联样式里写了 <style> div.outer{margin:0 auto; width:1090px; height:380px;} div.outer div{ float:left; } div....
复制链接

扫一扫