两个div并列显示

最新推荐文章于 2023-11-21 12:39:45 发布

蚂蚁搬家_志在不舍

最新推荐文章于 2023-11-21 12:39:45 发布

阅读量1.3k

点赞数

分类专栏：原创文档文章标签： div并列显示 width50 屏幕宽度50

本文链接：https://blog.csdn.net/changlei_shennan/article/details/71439843

版权

原创文档专栏收录该内容

46 篇文章 0 订阅

订阅专栏

要求：根据屏幕宽度，实现两个div并排显示

直接展示源码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">

#div1{
    width:50%;
    height:400px;
    float:left;
    background:red;
}
#div2{
    width:50%;
    height:400px;
    float:right;
    background:yellow;
}

</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

显示效果：

，，，现在有没有发现没有设置border,,,当你给左右设置border时候，会发现黄色会显示到下面来，，，怎么回事呢？

这主要是盒子模型吧，当float左边50% +border之后，右边的50%就不够显示了，然后float自动就显示到下一行中，。。。解决办法直接看下面的源码吧：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">

.class{

}
#div1{
    width:50%;
    height:400px;
   border:1px red solid;
   box-sizing:border-box;
   background-image:url("http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg");
   float:left;
   text-align:center;
   line-height:400px;
   color:red;
}

#div2{
    width:50%;
    height:400px;
   border:1px red solid;
   box-sizing:border-box;
   background-image:url("http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg");
    float:right;
    text-align:center;
    line-height:400px;
    color:red;
}

</style>
</head>
<body>
    <div class="class">
   <div id="div1">测试1</div>
    <div id="div2">测试2</div>
    </div>
</body>
</html>

显示效果图：

，，，效果看到了吧，，，实现两个div并列显示，各占屏幕宽度一半。

蚂蚁搬家_志在不舍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个div并列显示

要求：根据屏幕宽度，实现两个div并排显示直接展示源码：浮动模型#div1{ width:50%; height:400px; float:left; background:red;}#div2{ width:50%; height:400px; float:right;
复制链接

扫一扫