我怎么能把这个div推到另一个？
JSFiddle：http://jsfiddle.net/2vLYn/
我有这样的表格：
如果你看一下图像，第三个盒子就在下方，因为第二个盒子正在向下推，有没有办法可以让第三个盒子放在第一个盒子下方，这样就没有太多的空白了？
这是HTML
<div id="wrapper"> <!--Open Main Wrapper -->
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
<div style="clear:both;"></div>
</div> <!--Close Main Wrapper -->
这是CSS
#wrapper {
width:1000px;
background-color:#ffffff;
margin: 0px auto 0px auto;
border-right-width:1px;
border-right-color:#fff;
border-right-style:solid;
border-left-width:1px;
border-left-color:#fff;
border-left-style:solid;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#fff;
-moz-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.selection_list {
width:460px;
margin:10px;
padding:5px;
float:left;
background-color:#eeeeee;
-moz-border-radius: 15px;
border-radius: 15px;
}
.selectionleft{
float:left;
width:60px;
padding:0px;
margin:5px;
}
.selectionright{
float:left;
padding:8px;
margin:5px;
font-size:14px;
}
5 个答案:
答案 0 :(得分：1)
使用两个包装器：然后将这两个包装器浮在一起。在第一个包装器中放入两个小列表，在另一个包装器中放入大一个和一个小包装。这应该可以解决问题。
我在这里添加了一个代码：http://jsfiddle.net/2vLYn/1/
请注意此更改
<div id="wrapone"> <!-- FIRST WRAP -->
和这个改变
#wrapone {
width: 500px;
float:left;
}
答案 1 :(得分：0)
为.selectionleft和.selectionright创建单独的包装器div然后浮动包装器div这将修复你的问题。
答案 2 :(得分：0)
<html>
<head>
<style type="text/css">
#wrapper {
width:1000px;
background-color:#ffffff;
margin: 0px auto 0px auto;
border-right-width:1px;
border-right-color:#fff;
border-right-style:solid;
border-left-width:1px;
border-left-color:#fff;
border-left-style:solid;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#fff;
-moz-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.selection_list {
width:460px;
margin:10px;
padding:5px;
float:left;
background-color:#eeeeee;
-moz-border-radius: 15px;
border-radius: 15px;
}
.selectionleft{
float:left;
width:60px;
padding:0px;
margin:5px;
}
.selectionright{
float:left;
padding:8px;
margin:5px;
font-size:14px;
}
#leftColumn{
float: left;
width: 480px;
}
#rightColumn{
float:right;
width: 480px;
}
</style>
</head>
<body>
<div id="wrapper"> <!--Open Main Wrapper -->
<div id="leftColumn">
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title 1</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title 3</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
</div>
<div id="rightColumn">
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title 2</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title 4</strong></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
</div>
<div style="clear:both;"></div>
</div> <!--Close Main Wrapper -->
</body>
</html>
但是，我认为这些盒子大小相同，但您可以自己调整
答案 3 :(得分：0)
制作2个单独的包装器并将div放在相关的包装器中，例如：
<强> CSS ：
#left-wrapper {
float:left;
width:400px;
}
#right-wrapper {
float:left;
width:400px;
}
<强> HTML ：
<div id="wrapper">
<div id="left-wrapper">
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
</div>
<div id="right-wrapper">
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
<div style="clear:both;"></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong></div>
<div class="selectionright"><strong>This is where some text will go</strong></div>
</div>
</div>
</div>
答案 4 :(得分：0)
使用经过验证的结果检查此 demo 。
HTML
<div id="wrapper">
<!--Open Main Wrapper -->
<div style="float:left">
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong>
</div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong>
</div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
</div>
</div>
<div style="float:left">
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"> <strong>Title</strong>
</div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
<div style="clear:both;"></div>
<div class="selectionleft">Checkbox</div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
<div style="clear:both;"></div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
<div style="clear:both;"></div>
</div>
<div class="selection_list">
<div style="padding:3px; margin:3px; font-size:16px;"><strong>Title</strong>
</div>
<div class="selectionright"><strong>This is where some text will go</strong>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<!--Close Main Wrapper -->
CSS
#wrapper {
width:1000px;
background-color:#ffffff;
margin: 0px auto 0px auto;
border-right-width:1px;
border-right-color:#fff;
border-right-style:solid;
border-left-width:1px;
border-left-color:#fff;
border-left-style:solid;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#fff;
-moz-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.selection_list {
width:460px;
margin:10px;
padding:5px;
clear:both;
background-color:#eeeeee;
-moz-border-radius: 15px;
border-radius: 15px;
}
.selectionleft {
float:left;
width:60px;
padding:0px;
margin:5px;
}
.selectionright {
left:13px;
position:relative;
margin-top:16px;
font-size:14px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？