1

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;
}
4

5 回答 5

1

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

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

注意这个变化

<div id="wrapone"> <!-- FIRST WRAP -->

而这个变化

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

于 2013-11-01T14:35:42.513 回答
0

Check this demo with verified result.

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;
}
于 2013-11-01T16:51:56.253 回答
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>

但是是的，我假设这些盒子的尺寸相同，但您可以自行调整

于 2013-11-01T14:53:04.147 回答
0

为 .selectionleft 和 .selectionright 制作单独的包装器 div，然后浮动该包装器 div，这将解决您的问题。

于 2013-11-01T14:42:18.397 回答
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>

演示：http: //jsfiddle.net/2vLYn/6/

于 2013-11-01T14:57:21.767 回答