line elements inside multiple div's equal

时间：2016-12-09 12:43:01

标签： html css flexbox

I want to line each subject inside a block to the same height. By subjects I mean the title, content and the button. The biggest problem is the button. When I give the class .content a height everything looks nice until I'm changing the zoom of my window of change resolution.

Thanks in advance for you help.

#information_blocks {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    background-color: rgba(215, 201, 187, 0.9);
    box-shadow: inset 0 20px 20px -20px black;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.block {
    /*border: 1px solid #adadad;*/
    display: inline-block;
    flex: 1 1 0 100%;
    width: 20%;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.74902) 0 0 15px 0;
    height: auto;
}

.block:first-child {
    margin-left: 9%;
    float: left;
}

.block:last-child {
    float: right;
    margin-right: 10%;
}

.block .container {
    display: block;
    flex: 1 1 100% 0;
    text-align: center;
    width: 100%;
}

.block .container:last-child {
    margin-top: 5%;
    height: 20%;
}

.block .container .title {
    display: block;
    font-size: 1.5em;
    color: #1b6d85;
    margin: 0 auto 0 auto;
}

.block .container .content {
    display: block;
}

.block .container .button {
    display: block;
    margin: auto auto auto auto;
    width: 120px;
    height: 50px;
    background-color: #1b6d85;
    color: white;
    line-height: 45px;
}
<div id="information_blocks">

    <div class="block">
        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean

            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>
    </div>
    <div class="block">


        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                dsfdscsdcdscs
            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>


    </div>
    <div class="block">
        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>
    </div>


</div>

3 个答案:

答案 0 :(得分：1)

You should give flex: 0 0 auto to .block .container:last-child and remove height: 20% from the button.

Have a look at the working snippet (hope this is what you are looking for):

#information_blocks {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    background-color: rgba(215, 201, 187, 0.9);
    box-shadow: inset 0 20px 20px -20px black;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.block {
    /*border: 1px solid #adadad;*/
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.74902) 0 0 15px 0;
  justify-content: space-between;
}

.block:first-child {
    margin-left: 9%;
}

.block:last-child {
    margin-right: 10%;
}

.block .container {
    flex: 1;
    text-align: center;
    width: 100%;
}

.block .container:last-child {
    flex: 0 0 auto !important;
    margin-top: 5%;
    display: flex;
    align-items: flex-end;
}

.block .container .title {
    font-size: 1.5em;
    color: #1b6d85;
    margin: 0 auto 0 auto;
}

.block .container .content {}

.block .container .button {
    margin: auto auto auto auto;
    width: 120px;
    height: 50px;
    background-color: #1b6d85;
    color: white;
    line-height: 45px;
}
<div id="information_blocks">

    <div class="block">
        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean

            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>
    </div>
    <div class="block">


        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                dsfdscsdcdscs
            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>


    </div>
    <div class="block">
        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>
    </div>


</div>

Hope this helps!

答案 1 :(得分：1)

You're gonna have to restructure the entire thing, I'm afraid. I would recommend using a table-like structure for that:

HTML

<div class="display-table">
    <div class="display-table-row">
        <div class="display-table-cell">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
        </div>
        <div class="display-table-cell">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam Lorem ips
        </div>
        <div class="display-table-cell">
            Lorem ipsum dolor sit amet, consectetuer adipiscing. Aenean massa. Cum sociis natoque penatibus et
        </div>
    </div>
    <div class="display-table-row">
        <div class="display-table-cell">
            <button>
                button
            </button>
        </div>
        <div class="display-table-cell">
            <button>
                button
            </button>       </div>
        <div class="display-table-cell">
            <button>
                button
            </button>       
        </div>
    </div>
</div>

CSS

.display-table {
    display: table;
    table-layout: fixed;
}

.display-table-row {
    display: table-row;
}

.display-table-cell {
    display: table-cell;
    vertical-align: top; // change this to "middle" if you want to vertically align the content
    width: 1%;
}

JSBIN: https://jsbin.com/riyemizaqi/edit?html,css,output

答案 2 :(得分：1)

解决此问题的另一种方法是将padding-bottom: 100px;和position: relative;添加到.block元素，然后position: absolute;添加.button。

工作jsfiddle here。

CSS修正案：

.block {
    padding-bottom: 100px;
    position: relative;
}

.button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

以下整个代码以保持自己的答案。

<div id="information_blocks">

    <div class="block">
        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean

            </div>
        </div>

        <div class="container">
            <div class="button">Learn more</div>
        </div>
    </div>
    <div class="block">


        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
                dsfdscsdcdscs
            </div>
        </div>

            <div class="container">
            <div class="button">Learn more</div>
        </div>


    </div>
    <div class="block">
        <div class="container">
            <div class="title">
                Social media
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
            </div>
        </div>


           <div class="container">
            <div class="button">Learn more</div>
        </div>

    </div>


</div>

#information_blocks {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    background-color: rgba(215, 201, 187, 0.9);
    box-shadow: inset 0 20px 20px -20px black;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.block {
    /*border: 1px solid #adadad;*/
    display: inline-block;
    flex: 1 1 0 100%;
    width: 20%;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.74902) 0 0 15px 0;
    height: auto;
    padding-bottom: 100px;
    position: relative;
}

.block:first-child {
    margin-left: 9%;
    float: left;
}

.block:last-child {
    float: right;
    margin-right: 10%;
}

.block .container {
    display: block;
    flex: 1 1 100% 0;
    text-align: center;
    width: 100%;
}

.block .container:last-child {
    margin-top: 5%;
    height: 20%;
}

.block .container .title {
    display: block;
    font-size: 1.5em;
    color: #1b6d85;
    margin: 0 auto 0 auto;
}

.block .container .content {
    display: block;
}

.button {
    display: block;
    margin: auto auto auto auto;
    width: 120px;
    height: 50px;
    background-color: #1b6d85;
    color: white;
    line-height: 45px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}
相关问题
最新问题