div容器位置横排 / 纵排

最新推荐文章于 2021-06-02 18:49:12 发布

alison liang

最新推荐文章于 2021-06-02 18:49:12 发布

阅读量819

点赞数

文章标签： css html

紫萱

本文链接：https://blog.youkuaiyun.com/qq_41819008/article/details/105490658

版权

本文介绍了如何使用CSS解决div容器的布局问题，从原本无法定位到目标位置，通过调整CSS实现横排或纵排，达到预期效果。具体解决方案及代码示例文中均有详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.遇到的问题上图，本来想把黑色框放到箭头处
在这里插入图片描述 2.解决之后见图
上原代码：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<head>
<style>
div{
    text-align:center;
    align:center;
}
.div0{/*大容器*/
    width:100%;
    height:1720px;
    border:1px solid blue;
}
.div1{/*标题容器*/
    margin:0;
    width:100%;
    height:100px;
    border:1px solid gray;
}
.div2{/*左侧2容器*/
    margin:0;
    width:30%;
    height:200px;
    border:1px solid red;
}
.div3{/*左侧3容器*/
    margin:0;
    width:30%;
    height:200px;
    border:1px solid blue;
}
.div4{/*左侧4容器*/
    margin:0;
    width:30%;
    height:200px;
    border:1px solid blue;
}
.div5{/*中间1容器*/
    margin-top:-606px;/*div2/3/4容器的高度加他们的border，margin-top=200*3+1+2+2+1*/
    margin-left:30%;
    width:40%;
    height:200px;
    border:1px solid black;
}
</style>
</head>
<body>
    <div class="div0">
        <div class="div1">标题</div>
        <div class="div2">信息2</div>
        <div class="div3">信息3</div>
        <div class="div4">信息4</div>
         <div class="div5">大图</div>
    </div>
</body>
</html>