我正在寻找在容器div水平排列我的div。我在JQuery网站上发现了一个
example，但这是垂直排序。我想要水平
我想在#sortable Div中进行排序。
请指导我如何以水平的方式转换这个垂直排序。
CSS
- <style type="text/css">
- #draggable1 { width: 150px; height: 35px; padding: 0.5em; }
- #draggable2 { width: 150px; height: 35px; padding: 0.5em; }
- #draggable3 { width: 150px; height: 35px; padding: 0.5em; }
- #sortable { width: 700px; height: 35px; padding: 0.5em; }
- </style>
JavaScript的
- <script type="text/javascript">
- $(function() {
- $("#sortable").sortable({
- revert: true
- });
- });
- </script>
HTML
- <div class="demo">
- <div id="sortable" class="ui-state-default">
- <div id = "draggable1" class="ui-state-default">Home</div>
- <div id = "draggable2" class="ui-state-default">Contact Us</div>
- <div id = "draggable3" class="ui-state-default">FAQs</div>
- </div>
- </div>
解决方法
您可以添加此CSS样式：
- #sortable>div { float: left; }
他们将是水平的，仍然可以排序。 You can see a demo of it in action here。
