Div "wrap "不是在盒子模型中运行

div id "wrapper" not running in box model

本文关键字：quot 模型 运行 盒子 wrap Div      更新时间：2023-09-26

我在CSS中创建了一个id包装器:

#wrapper {
    position: relative;
    background: yellow;
    -webkit-box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    width: 960px;
    padding: 40px 35px 35px 35px;
    margin: 0px auto;
}

class box in CSS:

float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007; 
border-radius: 5px;
right: auto;
HTML: 

<div id="wrapper"><div class="box">
    <a href="#"><p>ini box 1</p></a>    
</div> </div>

问题是盒子从包装上出来了。解决方案是什么?

移除css的left样式

.box {
    width: 170px;
    height: 190px;
    margin: 10px;
    border: 3px solid #8AC007;
    border-radius: 5px;
    right: auto;
}

将overflow: auto添加到包装器中以清除box的浮动

我总是建议在浮点数之后添加一个清除元素，旧的IE在没有它们的情况下特别难以预测

<div id="wrapper">
    <div class="box">
        <a href="#"><p>ini box 1</p></a>    
    </div>
    <div class='clr'></div>
</div>
CSS

额外

.clr {
    clear:both;
    height:0px;
}

相关文章：