Question

我目前在使用css时出现问题：

.text {
    width: 70%;
    height: auto;
    padding: 7px;
    margin-bottom: 10px;
    background: #ffffff;
    background: -moz-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
    background: -webkit-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: -o-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: -ms-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: linear-gradient(135deg, #ffffff 0%, #ebebeb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=1 );
    border: 1px solid rgba(0,29,50,0.5);
    border-radius: 6px;
}

.side {
    width: 20%;
    height: auto;
    padding: 7px;
    float: right;
    margin-bottom: 10px;
    background: #ffffff;
    background: -moz-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
    background: -webkit-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: -o-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: -ms-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
    background: linear-gradient(135deg, #ffffff 0%, #ebebeb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=1 );
    border: 1px solid rgba(0,29,50,0.5);
    border-radius: 6px;
}

（见http://jsfiddle.net/8L5Tf/工作）

正如你在JSFiddle看到的那样，我的第二个侧边栏触及了另一个侧边栏，但是我想让它漂浮在另一个边栏下方，我该如何解决？

Answer 1

您需要clear: right;班级.side：http://jsfiddle.net/8L5Tf/1/

然而，浮游物可能会很棘手，所以考虑将它们放在一个div中，正如理查德在评论中所说的那样。它可能最终变得更容易管理。

Answer 2

您可以添加容器div;

<div class="content">
    <div class="side">
        <div>
            Text...
        </div>
        <div>
            Text ...
        </div>
    </div>
    <div class="text">
        Text text
    </div>
</div>

（然后更新您的CSS，以便将应用于.side的美容样式应用于.side > div。）

请参阅http://jsfiddle.net/8L5Tf/3/

Div并不总是向右浮动

2 个答案: