0

我目前在 Razor 视图中使用 Twitter bootsrap 2.3

如何将以下 div 水平对齐，以获得类似于具有一行和 2 个单元格的表格的效果。Divs 应该在彼此的左侧和右侧。

        <div id="Main">

            <div id="left">
                <label><input type="checkbox" /> Left Side</label>

                <label><input type="checkbox" /> Left Side</label>

                <label>  <input type="checkbox" checked/> Left Side</label>

            </div>

            <div id="right">                 

                <label><input type="checkbox" /> Right side</label>

                <label><input type="checkbox" /> Right side</label>

                <label>  <input type="checkbox" checked/> Right side</label>

                </div>

        </div>
4

3 回答 3

1 
<div id="Main">
        <div id="right" style="float:left;">                 

            <label><input type="checkbox" /> Right side</label>

            <label><input type="checkbox" /> Right side</label>

            <label>  <input type="checkbox" checked/> Right side</label>

            </div>


        <div id="left" style="float:left;">
            <label><input type="checkbox" /> Left Side</label>

            <label><input type="checkbox" /> Left Side</label>

            <label>  <input type="checkbox" checked/> Left Side</label>

        </div>


    </div>
于 2013-09-12T17:30:25.640 回答
1

您可以通过将其浮动样式设置为左侧来浮动左侧 DIV：

<div id="left" style="float:left">

演示：http: //jsfiddle.net/GC4GY/

PS您不必将复选框放在标签内，您可以使用标签的“for”属性代替。例如你可以改变

<label>  <input type="checkbox" checked/> Left Side</label>

到

<input type="checkbox" id="chk3" checked="true" /><label for="chk3"> Left Side</label>
于 2013-09-12T17:33:09.540 回答
0

使用 twitter bootstrap工作

<div class="container">
    <div class="row">
        <div class="col-md-6">
                <h2>
                Heading
            </h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
                ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
                sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
                odio dui.</p>
            <p> <a class="btn btn-default" href="#">View details »</a>

            </p>
        </div>
        <div class="col-md-6">
                <h2>
                Heading
            </h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
                ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
                sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
                odio dui.</p>
            <p> <a class="btn btn-default" href="#">View details »</a>

            </p>
        </div>
    </div>
</div>
于 2013-09-12T18:05:05.833 回答