Как иметь две бок о бок divs выровнены по дну?

Question

Вместо рисунка 1, мне бы хотелось, чтобы Рисунок 2. На рисунке 1 меню и изображение выровнены в верхней части, но я бы хотел, чтобы они были выровнены снизу.

Вот мой CSS:

<div id="branding"> 
     <div class="brand-left"></div> 
     <div class="brand-right"></div> 
</div> 

#branding { 
    display: inline-block; 
    width: 100%; 
} 

.brand-left { 
    position: relative; 
    float: left; 
    width: 730px; 
} 

.brand-right { 
    text-align: right; 
    width: 222px; 
    float: left; 
} 

Answer 1

Существует несколько способов сделать это, и в конечном итоге это зависит от того, что вы пытаетесь выполнить и каковы ваши требования к проекту (например, поддержка браузера). Тем не менее, один из способов состоит в том, чтобы позиционировать элемент, который вы хотите выровнять поровну абсолютно.

1. Во-первых, назначить фирменную контейнер position: relative; свойство и значение
2. Во-вторых, поплавок ваш логотип правой
3. В-третьих, назначить свой контейнер, на который вы хотите Дно выравнивается с position: absolute; свойство и значение

Вот рабочий пример: http://codepen.io/mjoanisse/pen/grvBwE

Answer 2

Вы можете попробовать использовать display: flex;

.bottom { 
 
    display: flex; 
 
    bottom: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    width:100%; 
 
} 
 

 
.right { 
 
    margin-left: auto; 
 
}

<div class="bottom"> 
 
    <div class="left"> 
 
    left 
 
    </div> 
 
    <div class="right"> 
 
    right 
 
    </div> 
 
</div>

Answer 3

Решение 1 (с использованием Flex)

Вы можете добиться этого, используя display: flex. Все, что вам нужно сделать, это добавить эти правила к вашему branding DIV:

#branding { 
    display: flex; /* ADDED */ 
    align-items: flex-end; /* ADDED */ 
    width: 100%; 
    border: 1px solid green; 
} 

Вот фрагмент

#branding { 
 
    display: flex; 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    align-items: flex-end; 
 
} 
 

 
#branding > div{ 
 
    border: 1px solid blue; 
 
} 
 

 
.brand-left { 
 
    position: relative; 
 
    float: left; 
 
    width: 730px; 
 
} 
 

 
.brand-right { 
 
    text-align: right; 
 
    width: 222px; 
 
    float: left; 
 
}

<div id="branding"> 
 
     <div class="brand-left">content</div> 
 
     <div class="brand-right"> 
 
      <img src="http://senda-arcoiris.info/images/100x100.gif"/> 
 
     </div> 
 
</div>

---

Решение 2 (используя положение относительно/абсолют)

Другое решение без использования flex удалит floats из дочерних divs и разместит их как абсолютные. Пожалуйста, смотрите ниже фрагмент кода:

#branding { 
 
    position: absolute;  /* ADDED */ 
 
    width: 100%; 
 
    border: 1px solid green; 
 
} 
 

 
#branding > div{ 
 
    position: relative;  /* ADDED */ 
 
    display: inline-block; /* ADDED */ 
 
    border: 1px solid blue; 
 
    bottom: 0; 
 
} 
 

 
.brand-left { 
 
    width: 330px; /* I changed the width in order to fit in the snippet */ 
 
} 
 

 
.brand-right { 
 
    text-align: right; 
 
    width: 222px; 
 
}

<div id="branding"> 
 
     <div class="brand-left">content</div> 
 
     <div class="brand-right"> 
 
      <img src="http://senda-arcoiris.info/images/100x100.gif"/> 
 
     </div> 
 
</div>

Answer 4

Попробуйте добавить line-height в вашем .brand-left div

Answer 5

вы можете попробовать его с Flexbox

#branding{ 
 
    width:100%; 
 
    display:flex; 
 
    height:250px; 
 
    background-color:green; 
 
    align-items:flex-end; 
 
} 
 

 

 

 

 
.brand-left { 
 
    position: relative; 
 
    width: 730px; 
 
    height:150px; 
 
    background-color:pink; 
 
} 
 

 
.brand-right { 
 
    text-align: right; 
 
    width: 222px; 
 
    background-color:blue; 
 
    height:250px; 
 
}

<div id="branding"> 
 
     <div class="brand-left"></div> 
 
     <div class="brand-right"></div> 
 
    </div>

Answer 6

На всякий случай заинтересованы без display: flex

#branding { 
 
    width: 100%; 
 
} 
 
.brand-left { 
 
    position: relative; 
 
    float: left; 
 
    width: 750px; 
 
    background: #f00; 
 
    min-height: 250px; 
 
} 
 
.brand-left .nav { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    right: 15px; 
 
} 
 
.brand-left .nav li { 
 
    display: inline; 
 
} 
 
.brand-right { 
 
    text-align: right; 
 
    width: 222px; 
 
    float: left; 
 
    background: #ff0; 
 
    min-height: 250px; 
 
}

<div id="branding"> 
 
    <div class="brand-left"> 
 
    <ul class="nav"> 
 
     <li><a href="#">Registration</a> 
 
     </li> 
 
     <li><a href="#">Log In</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="brand-right"></div> 
 
</div>