时间戳

首页 > 解决方案 > tag div 放一些word 会改变div 的位置吗？

html - tag div 放一些word 会改变div 的位置吗？

问题描述

我使用div进行布局。

问题是<div class="c">1</div>，

我把数字 1 放在里面 <div class="c">1</div>， div会在下面。

我删除数字 1 <div class="c"></div>，该 div将向上。

我很困惑为什么div中的文本会改变位置。

这是我在下面给出的代码：

div.content {
    border: 5px solid black;
    box-sizing: border-box;
    font-size: 0;

    width:1000px;
    
    height: 800px;
    }




    div.a {

    border: 5px solid rgb(212, 69, 69);
    box-sizing: border-box;
    width: 300px;

    height: 600px;
    
    font-size: 16px;


    display: inline-block;

    }

    div.b {
    border: 5px solid rgb(11, 141, 22);
    box-sizing: border-box;
    width: calc(100% - 300px);

    height: 500px;

    font-size: 16px;

    display: inline-block;
    }

    div.c {
    border: 5px solid rgb(219, 7, 209);
    box-sizing: border-box;
    
    }
<div class="content">
         
        <div class="a"></div>
        <div class="b">

            <div class="c">1</div>

        </div> 


    </div>

标签： htmlcss

解决方案

取决于你想要的。

position:absolute;将使您的桌子直接排在绿色框的右侧。发生这种情况是因为默认设置是您的盒子是relative它们的父容器。将其更改为绝对允许它几乎独立地工作。

或者

如果您想在下面显示您的框，请将您的display:样式更改为。这是有效的，因为它不再被迫与上面的框在一起，现在可以整齐地显示在下面。block;in-linein-line

这是absolute定位的片段： 

div.content {
    border: 5px solid black;
    box-sizing: border-box;
    font-size: 0;

    width:1000px;
    
    height: 800px;
    }




    div.a {

    border: 5px solid rgb(212, 69, 69);
    box-sizing: border-box;
    width: 300px;

    height: 600px;
    
    font-size: 16px;


    display: inline-block;

    }

    div.b {
    border: 5px solid rgb(11, 141, 22);
    box-sizing: border-box;
    width: calc(100% - 300px);
    position:Absolute;
    height: 500px;

    font-size: 16px;

    display: inline-block;
    }

    div.c {
    border: 5px solid rgb(219, 7, 209);
    box-sizing: border-box;
    
    }
<div class="content">
         
        <div class="a"></div>
        <div class="b">

            <div class="c">1</div>

        </div> 


    </div>

推荐阅读