不能使两个div并排浮动

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在body下，一个用class“side”，第二个用class“main”。我想使div的浮动并排，但它不能正常工作。不能使两个div并排浮动

来源

2015-09-12 galah92

使用float不能实现这个结构。你需要使用位置绝对属性。

试试下面的代码：

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>

来源

2015-09-14 16:08:33

不能使两个div并排浮动

回答

相关问题