为什么两个DIV不能再一个大的DIV中并排排列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>联系我们</title>
        <link href="../css/Contact_us.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="head">
            <div class="logo">
                <img src="../img/index/logo.jpg" />
            </div>
            <div class="nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="Company_profile.html">公司简介</a></li>
                    <li><a href="Hui_life.html">慧生活</a></li>
                    <li><a href="Product_Center.html">产品中心</a></li>
                    <li><a href="Contact_us.html">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="content01">
                
            </div>
            <div class="content02">
                
            </div>
        </div>
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}
.head{
    width: 100%;
    height: 104px;
}
.logo{
    float: left;
    margin-left: 200px;
}
.nav{
    float: right;
}
.nav ul{
    list-style: none;
}
.nav ul li{
    display: inline;
    margin: 0px 30px;
    line-height: 104px;
    font-size: 20px;
    font-family: "黑体";
}
.nav ul li a{
    text-decoration: none;
}
a:link{
    color: black;
}
a:visited{
    color: black;
}
a:focus{
    color: darkgreen;
}
a:hover{
    color: gray;
}
a:active{
    color: skyblue;
}
.content{
    width: 1200px;
    height: 900px;
    border: 1px black solid;
    margin: 0px auto;
}
.content01{
    width: 280px;
    height: 880px;
    border: 1px black solid;
    float: left;
}
.content02{
    width: 920px;
    height: 880px;
    border: 1px black solid;
    float: right;
}

可樂i 2019-03-29

源自：JavaScript函数 1-5 选择练习

收起

2回答

好帮手慕星星 2019-03-31 09:10:19

同学你好，用你第二次粘贴的代码进行测试是可以排列在一行显示的哦：

同学是不是修改之后没有保存文件呢，自己可以再测试下，祝学习愉快！

收起回答

厚德载物ddd 2019-03-29 18:11:54

同学你好，content1和content2两个元素的width相加为1200px，但是两个元素分别有左右为1px的边框，整体的width就是1204px，而父元素content的width为1200px，不能完全放下两个子元素，所以建议把content元素的宽度设为1204px，便可实现并排排列。

希望能解决你的疑惑，祝学习愉快~~~

收起回答

提问者可樂i #1

为什么我改了还是不能并排？ .content{ width: 1300px; height: 900px; border: 1px black solid; margin: 0px auto; } .content01{ width: 280px; height: 880px; border: 1px black solid; float: left; } .content02{ width: 920px; height: 880px; border: 1px black solid; float: right; }

2019-03-29 19:10:07
厚德载物ddd 回复提问者可樂i #2

同学你好,根据你的代码，经过测试是可以的，你可以再测试一下哦！祝学习愉快~~~

2019-04-01 09:50:03