Question

我正在制作一个html页面，并具有3种类型的框，我的宽度为20％（称为单框），宽度为40％，称为双框（都具有33％的高度）。

另一个bbox的高度为100％（称为foto-box），宽度为40％。

现在，我想漂浮在彼此的旁边：双盒子，singel盒子，foto盒子。然后，我要所有单个盒子，但是单个bbox的数量低于foto-box的100％。我怎么能

html, body{
    height: 100%;
    background-color: #c5c5c5;
}
.screen{
    width: 98%;
    height: 98%;
    margin: 1% 1% 1% 1%;

}
.dubble-box{
    width: 40%;
    height: 33%;
    background-color: aqua;
    float: left;
}
.single-box{
    height: 33%;
    width: 20%;
    background-color: black;
    float: left;
}
.picture-box{
    width:40%;
    height: 100%;
    background-color: bisque;
    float: left;
}

<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css"><!--resets css to default-->
<link rel="stylesheet" href="main.css"><!--gives css to page-->
<link rel="shortcut icon" href="lb.png" type="image/png">
<body>
<div class="screen">
    <div class="dubble-box">
        <p> levi</p>
    </div>
    <div class="single-box"></div>
    <div class="picture-box"></div>
    <div class="single-box"></div>


</div>

</body>

Picture

用CSS放置盒子

0 个答案: