Question

我想浮动：正确的div而不改变html中div列表的顺序。我有一个div列表，最多4个显示在一行。输入新行时，所有剩余的div也必须正确浮动。调整HTML div以显示权限不是一个选项，因为div是动态加载的并且可以设置为隐藏（不同的菜单显示为不同的角色，但菜单顺序必须保留）。 Html建立在bootstrap上。

请举例： http://jsfiddle.net/mkLvs/3

（请记住，新行中的剩余div必须浮动在右侧。）

<style type="text/css">
.span3.menu {
text-align:center;
background-color:yellow;
padding:10px;
border: 1px solid black;
float:right;
}
.row-fluid.one {
float:right;
}
</style>
</head>
<body>
<div class="container">
    <div class="row-fluid one">
    <div class="span3 menu"> <a href="#">Menu1</a></div>
    <div class="span3 menu"> <a href="#">Menu2</a></div>
    <div class="span3 menu"> <a href="#">Menu3</a></div>
    <div class="span3 menu"> <a href="#">Menu4</a></div>
    <div class="span3 menu"> <a href="#">Menu5</a></div>
    <div class="span3 menu"> <a href="#">Menu6</a></div>
    <div class="span3 menu"> <a href="#">Menu7</a></div>
    <div class="span3 menu"> <a href="#">Menu8</a></div>
</div> 
</div> 
</body>

感谢您的帮助。

Answer 1

您可以使用内联元素执行此操作，而无需使用float。

<div class='container'>
    <span><a href="#">Menu1</a></span>
    <span><a href="#">Menu2</a></span>
    <span><a href="#">Menu3</a></span>
    <span><a href="#">Menu4</a></span>
    <span><a href="#">Menu5</a></span>
    <span><a href="#">Menu6</a></span>
    <span><a href="#">Menu7</a></span>
</div>

.container{
    text-align: right;
}

.container span{
    display: inline-block;
    text-align: center;
    width: 125px;
    height: 20px;
    margin: 3px 0px;
    background: yellow;
}

请参阅此fiddle

在不更改html中的div顺序的情况下向右浮动

1 个答案: