1

我正在尝试浮动：正确的 div 而不更改 html 中 div 列表的顺序。我有一个 div 列表，一行中最多显示 4 个。输入新行时，所有剩余的 div 也必须向右浮动。将 HTML div 调整为正确显示不是一个选项，因为 div 是动态加载的，可以设置为隐藏（不同的菜单显示给不同的角色，但菜单顺序必须保持不变）。Html 建立在引导程序之上。

请参阅示例：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>

谢谢您的帮助。

4

1 回答 1

2

您可以使用内联元素执行此操作，而无需使用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;
}

看到这个小提琴

于 2014-02-20T10:58:19.343 回答