使用经过验证的结果检查此 demo 。

Question

我有这样的表格：

enter image description here

如果你看一下图像，第三个盒子就在下方，因为第二个盒子正在向下推，有没有办法可以让第三个盒子放在第一个盒子下方，这样就没有太多的空白了？

这是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;
}

Answer 1

使用两个包装器：然后将这两个包装器浮在一起。在第一个包装器中放入两个小列表，在另一个包装器中放入大一个和一个小包装。这应该可以解决问题。

我在这里添加了一个代码：http://jsfiddle.net/2vLYn/1/

请注意此更改

<div id="wrapone"> 

和这个改变

#wrapone { width: 500px; float:left; }

Answer 2

为.selectionleft和.selectionright创建单独的包装器div然后浮动包装器div这将修复你的问题。

Answer 3

<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>

但是，我认为这些盒子大小相同，但您可以自己调整

Answer 4

制作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>

DEMO ：http://jsfiddle.net/2vLYn/6/

Answer 5

使用经过验证的结果检查此 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;
}

我怎么能把这个div推到另一个？

5 个答案:

使用经过验证的结果检查此 demo 。

HTML

CSS