将div底部的元素与动态边框对齐（绝对位置+边距）

Question

I´m currently trying to make an element with variable width and a border at it´s right. The border should always stay away a certain distance from the text elements, which vary in size and count. So the Border should move dynamically. It all works fine if I place my text elements inside the dynamic div but the text has to be positioned on the bottom of the page. So I tried to use position: absolute; bottom: 0px; left: 0; position: absolute; bottom: 0px; left: 0; . But I learned due to the absolute positioning margin won´t work any further.

You can find my code here on codepen.io . The current state is the working dynamic border but with the text on the top side. I commented out the non working parts, which you can find on the bottom of the CSS file.

So what is a better/working way to position my text on the bottom of my div but also have a dynamic border on the right ?

 .statusbar { padding: 0; margin: 0; height: 150px; width: 50vw; background: #303030; color: white; } .statusbar .statusbar-content { width: calc(100vw - 48px); height: 150px; margin-left: 48px; float: left; } .statusbar .statusbar-content .statusbar-col { margin-top: 20px; margin-bottom: 20px; display: inline-block; float: left; border: none; border-right: 1px solid #505050; position: relative; height: 110px; } .statusbar .statusbar-content #appserver-col, .statusbar .statusbar-content #command-col, .statusbar .statusbar-content #connection-col { margin-left: 23px; } .statusbar .statusbar-content #connection-col { border: none; } .statusbar .statusbar-content .col-content { padding-right: 23px; } .statusbar .statusbar-content .content-row { position: relative; height: 110px; } .statusbar .statusbar-content .content-item { display: inline-block; margin-right: 23px; } 

 <div class="statusbar"> <div class="statusbar-content"> <div class="statusbar-col" id="database-col"> <div class="col-content"> <div class="content-row"> <div class="content-item">Test_Text_1</div> <div class="content-item">Test_Text_2</div> </div> </div> </div> </div> 

---

EDIT

The output should look like this in the end.

Answer 1

This works :

HTML

<div class="statusbar">
    <div class="statusbar-content">
        <div class="statusbar-col" id="database-col">
            <div class="col-content">
                <div class="content-row">
                    <div class="content-extender"></div>
                    <div class="content-item">Test_Text_1</div>
                    <div class="content-item">Test_Text_2</div>
                </div>
            </div>
        </div>
    </div>          
</div>

CSS

.col-content {
    padding-right: 23px;
}

.content-row .content-extender {
  display: inline-block;
  height: 110px;
}

.content-item {
    display: inline-block;
    margin-right: 23px;
    vertical-align: bottom;
}

You don't specify an height on your content-row , but you extend vertically this container using an invisible (beacause empty) inline-block div. Then you align the inline-block components on bottom.

See here the forked codepen : http://codepen.io/anon/pen/ONLpOw (I added something so you don't have to specify a fixed height on every block : the content-extender height defines the height of the overall statusbar).

Is that what you were trying to do ?

Answer 2

Flexbox can do that:

.statusbar .statusbar-content .content-row {
  position: relative;
  height: 110px;
  display: flex;
  align-items: flex-end;
}

 .statusbar { padding: 0; margin: 0; height: 150px; width: 50vw; background: #303030; color: white; } .statusbar .statusbar-content { width: calc(100vw - 48px); height: 150px; margin-left: 48px; float: left; } .statusbar .statusbar-content .statusbar-col { margin-top: 20px; margin-bottom: 20px; display: inline-block; float: left; border: none; border-right: 1px solid #505050; position: relative; height: 110px; } .statusbar .statusbar-content #appserver-col, .statusbar .statusbar-content #command-col, .statusbar .statusbar-content #connection-col { margin-left: 23px; } .statusbar .statusbar-content #connection-col { border: none; } .statusbar .statusbar-content .col-content { padding-right: 23px; } .statusbar .statusbar-content .content-row { position: relative; height: 110px; display: flex; align-items: flex-end; } .statusbar .statusbar-content .content-item { display: inline-block; margin-right: 23px; } 

 <div class="statusbar"> <div class="statusbar-content"> <div class="statusbar-col" id="database-col"> <div class="col-content"> <div class="content-row"> <div class="content-item">Test_Text_1</div> <div class="content-item">Test_Text_2</div> </div> </div> </div> </div>