Question

html {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    background-color: #f5f5f5;
}

body {
    width: 70%;
    box-shadow: 0px 0px 10px #ffffff;
    margin: 25px auto;
}

.side {
    float: left;
    width: 250px;
    background-color: #e0e0e0;
}

.main {
    float: right;
    margin-left: 250px;
    background-color: #ffffff;
}

在html文件中，我在主体下面有两个div，一个是“side”类，第二个是“main”类。我想让div的浮动并排，但它不能正常工作。

Answer 1

Using float you can't achieve this structure. you need to use position absolute property.

Try below code :

CSS

body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    background-color: #f5f5f5;
}
.wraper{
    position: relative;
    width: 70%;
    box-shadow: 0px 0px 10px #ffffff;
    margin: 25px auto;
    background: black;
}
.side {
    width: 30%;
    background-color: #e0e0e0;
    position: absolute;
}
.main {
    float: left;
    margin-left: 30%;
    width: 70%;
    background-color: #ffffff;
    box-sizing: border-box;
}
.clear{
    clear: both;
}

HTML

<body>
<div class="wraper">
    <div class="side">
        <div>  left </div>
    </div>
    <div class="main">
        <div>  right </div>
    </div>
    <div class="clear"></div>
</div>
</body>

不能让两个div并排浮动

1 个答案: