正确对齐我的div

Question

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

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

...
def new
  @item = Item.new
  respond_with(@item)
end

def create
  @item = Item.new(item_params)
  @item.save
  respond_with(@item)
end
...
def item_params
  params.require(:item).permit(
    :name, :description, :price,
    image_attributes: [:image]
  )
end

三列的CSS：

def create
  @item = Item.new(item_params)
  params[:images].each do |image|
    img = Image.new
    img.image = image
    @item.images << img
  end
  @item.save
  respond_with(@item)
end

编辑* 我认为问题不是列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;
}

Answer 1

我不知道你取得了什么，但我可以说你正在以错误的方式使用bootstrap。每一行都应该有像div-md-3这样的类。如果你没有把div放在行内，那么边距就会被打破。

另一件事是右栏css

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

保证金权利：-17px;一旦更改行内容位置，就会制动引导网格系统。

尝试将行添加到行内的de div并删除margin-right：-17px;从你的css，看看发生了什么。

Answer 2

发现问题所在。这是标题div中的一个问题。之前

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

我取出了容器类，它就解决了。这是第一个div。它收集整个标题。