css - このdivを押し上げて、他のdivの下に配置するにはどうすればよいですか?

Question

私はこのフォームを持っています:

ここに画像の説明を入力

画像を見ると、2 番目のボックスがそれを押し下げているため、3 番目のボックスが下に移動します。3 番目のボックスを 1 番目のボックスの下に置いて、空白があまりないようにする方法はありますか?

ここに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;
}

score 0 · Accepted Answer

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

しかし、はい、ボックスは同じサイズであると想定しましたが、自分で微調整できます

score 0 · Accepted Answer

.selectionleft と .selectionright の個別のラッパー div を作成し、そのラッパー div をフロートすると、問題が解決します。

score 0 · Accepted Answer

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/

css - このdivを押し上げて、他のdivの下に配置するにはどうすればよいですか?

5 に答える 5

Related

Reference