正确对齐我的 div [重复]答案

【问题标题】：Aligning my div's correctly [duplicate]正确对齐我的 div [重复]
【发布时间】：2016-01-06 09:36:57
【问题描述】：

在将我的 div 与页面的其余部分垂直对齐时遇到了一些问题。所以我有一个带有主标题的顶部 div，然后我有一个下面有 3 个不同列的 div，每个列都有自己的 div。

这是包含所有三列的 div 的代码：

    <div class="container" id="content-content-library">

<!-- test!! -->
<div class="row">


<div class="col-xs-3">
    <div class="column-left">

            <div class="row">

                <!-- NOT NEEDED!
                <div class="row-library col-xs-3">-->

                    <div class="left-navigation-home">
                        <img src="/img/home_library.png" />
                        <span>Home</span>

                        <span class="test">1</span>
                        <img src="/img/side_arrow.png" height="15" width="15" />
                    </div>
            </div>


            <!-- original -->
            <!--
            <div class="row">

                    <div class="left-navigation-home">
                        <span>Home</span>

                        <div class="library-stats-number">
                            <div class="stat">
                                <span class="counter">1</span>
                            </div>
                        </div>

                    </div>
            </div>
            -->
            <!-- end original -->   





        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-school">
                        <img src="/img/book_library.png" />
                        <span>School</span>
                        <span class="test">1</span>

                    </div>

            </div>  


        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-health">
                        <img src="/img/health_library.png" />
                        <span>Health</span>
                        <span class="test">1</span>
                    </div>

            </div>  


        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-community">
                        <img src="/img/user_library.png" />
                        <span>Community</span>
                        <span class="test">1</span>
                    </div>

            </div>  


        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-extra">
                        <img src="/img/extra_library.png" />
                        <span align="left">Extracurricular</span>
                        <span class="test">1</span>
                    </div>

            </div>

    </div>
</div>

<!-- test -->
<div class="col-xs-6 middle-column">

<!-- <div class="column-center">-->

        <!--  
            <div class="child color-blue">
                <div class="child-header">
                    <div class="child-info">
        -->     
                    <!-- OR -->

            <!--<div class="library color-blue">-->

    <!-- section for home click! -->
        <div class="row">
            <div class="col-sm-6">
                <div class="home-header">
                    <div class="library-info">
                            <h5 class="center-column-heading">Cleaning
                            <span ng-click="showLibraryDetails()" id="library-btn">
                                <img src="/img/drop_arrow_blue.png" height="10" width="10" />
                            </span>
                            </h5>
                    </div>
                </div>
            <!--</div>-->
            <!--<div class="child-stats">-->
                <div class="library-stats" ng-class="{'lib-nav' : active}">
                    <div class="stat first">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        Make Bed
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                    <div class="stat">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        Put toys away
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                </div>
            </div>

            <!-- test -->
            <div class="col-sm-6">
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="home-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="center-column-heading">Test
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    <!-- end of home section -->


        <!-- section for SCHOOL TEST click! -->
        <div class="row">
            <div class="col-sm-6">
                <div class="school-header">
                    <div class="school-info">
                            <h5 class="school-column-heading">Cleaning2
                            <span ng-click="showSchoolDetails()" id="school-btn">
                                <img src="/img/drop_arrow_pink.png" height="10" width="10" />
                            </span>
                            </h5>
                    </div>
                </div>
            <!--</div>-->
            <!--<div class="child-stats">-->
                <div class="school-stats" ng-class="{'school-nav' : active}">
                    <div class="stat first">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        test1
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                    <div class="stat">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        test2
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                </div>
            </div>

            <!-- test -->
            <div class="col-sm-6">
                <div class="library color-red">
                    <!--<div class="child-header">-->
                    <div class="school-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="school-column-heading">Test2
                                    <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    <!-- end of school TEST section -->







    <!-- second section -->
        <!--<div class="child color-blue">-->
        <div class="row">
            <div class="col-sm-6">
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="school-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">

                                <h5 class="center-column-heading">Pet Care
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

        <!-- Media use row example -->
            <div class="col-sm-6">
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="library-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="center-column-heading">Media Use
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>

                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>

        <!-- third section -->

                <!--<div class="child color-blue">-->
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="library-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="center-column-heading">Media Use
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>

                            </div>

                        </div>
                    </div>

                </div>


<!--</div>-->
</div>



<!-- <div class="column-right">-->
<div class="col-xs-3">
<div  class="column-right">

    <span class="filter-image-right">
        <img src="/img/clock_library-right.png" />
        <img src="/img/heart_library-right.png" />
        <img src="/img/handshake_library-right.png" />
        <img src="/img/lamp_library-right.png" />
    </span>

    <div>
    <h6 class="right-column-heading"><img src="/img/minus.png"/> Cleaning</h6>

    </div>
        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

    <h6 class="right-column-heading">Make Bed</h6>

        <p>
        For a younger child; Focus on smoothing out sheets and blankets for a clear
        playing/sitting surface.
        </p>

    <h6 class="right-column-heading">test</h6>

        <p>
        The concept of cleaning makes little sense to young children.  For     preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

        <h6 class="right-column-heading">test2</h6>

        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

    </div>
</div>


</div>

</div>

以及三列的css：

.column-left { 
height:100vh;
}

.column-right { 
background-color: #d0d0d0; 
overflow-y: scroll;
padding:10px;
margin-right:-17px;
height:100vh;
}

.middle-column{
height:100vh;
}

编辑* 我相信问题不在于列 div，而在于主标题 div。它位于网页的最右侧。

代码如下：

<div class="container" id="main-content">
<div id="content-header" class="assignments">

    <div class="container" >
        <h1>
            Library!!
            <span class="counter">22</span>
        </h1>
    </div>
    <button type="button" class="btn btn-green btn-lg btn-header" data-toggle="modal" ng-click="newAssignment()">Save</button>
    <div id="subheader">


        <div class="row">


                <div class="col-sm-6">
                    <div class="main-label filter-image">Filter:
                        <img src="/img/clock_library.png" />
                        <img src="/img/heart_library.png" />
                        <img src="/img/handshake_library.png" />
                        <img src="/img/lamp_library.png" />
                    </div>
                </div>

                <div class="lib-text">  
                    <input class="col-sm-5" type="text" name="search">
                    <img src="/img/magnifying_glass_white.png" />
                </div>  


        </div>

    </div>
</div>

和 CSS：

#content-header {
position: relative;
margin: auto;
color: #fff;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

【问题讨论】：

您能否将包含的代码缩减为仅包含指定的问题行为？考虑遵循有关如何创建Minimal, Complete, and Verifiable example 的指南。
提一下你正在使用引导程序可能是个好主意
@cocoa 是的，我很抱歉。我正在使用引导程序
@Serlite 上面的整个 div 没有正确对齐。假设您需要查看包含所有列的 div 的完整代码..
请不要在twitter-bootstrap 问题中使用bootstrap 标签。有一个twitter-bootstrap 标签是有原因的。

标签： html css twitter-bootstrap

【解决方案1】：

我不知道您正在实现什么，但我可以说您以错误的方式使用引导程序。每行都应该在里面有像 col-md-3 这样的类。如果没有在行内放一个 div，边距会被破坏。

另一件事是右列 css

.column-right { 
    background-color: #d0d0d0; 
    overflow-y: scroll;
    padding:10px;
    margin-right:-17px;
    height:100vh;
}

margin-right:-17px;更改行内容位置后，将停止引导网格系统。

尝试将类添加到行内的 de div 并删除 margin-right:-17px;从您的 CSS 中查看发生了什么。

【讨论】：

唯一删除margin-right 所做的就是将右列向左推更多。现在有一些可用的空白空间。包含所有列的 div 仍未与标题 div 对齐。
我对您的 html 和 css 做了一些更改。实际上我删除了不必要的行和 css。您可以在jsfiddle.net/otp84t7j/1 看到示例
谢谢你，我会检查它并修复我的代码。我附上了标题 div 的代码，这是问题所在。它位于网页的最右侧，我认为这是问题所在，而不是列。

【解决方案2】：

发现问题。这是标题 div 中的问题。之前是

<div class="container" id="main-content">

我把容器类拿出来就解决了。这是第一个 div。它包含整个标题。

【讨论】：