Question

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

如何将下面的divs水平对齐，以获得类似于包含行和2个单元格的表格的效果。 Div应该在彼此的左右两边。

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

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

Answer 2

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

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

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

P.S。您不必将标签放在标签内，您可以改为使用标签的“for”属性。例如。你可以改变

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

到

<input type="checkbox" id="chk3" checked="true" /><label for="chk3"> Left Side</label>

Answer 3

使用twitter bootstrap工作fiddle

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

如何水平对齐2个Divs彼此靠近

3 个答案: