JSFiddle - React, Tailwind, and code Playground

by crab1127

HTML

第一种方式
<div class="box1"></div>
<div class="box2"></div>
第二种方式
<div class='box4'>

    <div class="box5"></div>
    <div class="box6"></div>
</div>

CSS

.box1{
width:200px;
height:50px;
border:1px solid #f00;
 float:left;
margin-top:75px;
}
.box2{
width:50px;
height:200px;
border:1px solid #f00 ;
    margin-left:75px;
}

/*方式2*/
.box4{
    clear：both;
    width:200px;
    height:200px;
    position:relative;
}
.box5{
    position:absolute;
    top:50%;
    margin-top:-25px;
        width:200px;
height:50px;
border:1px solid #f00;
}
.box6{
    position:absolute;
    left:50%;
    margin-left:-25px;
        width:50px;
height:200px;
border:1px solid #f00;
}