Два DIV бок о бок и выровнены по вертикали на дне

Мне нужно, чтобы два DIV были вставлены бок о бок и выровнены по вертикали внизу.

Оранжевый div не имеет ширины или высоты. Он может расти в зависимости от его содержания.
Я должен иметь возможность использовать отступы и поля зеленого div
Я хотел бы иметь решение, которое не использует javascript

Ответ 1

Смотрите: http://jsfiddle.net/thirtydot/J9eds/

Я использовал display: inline-block в сочетании с vertical-align: bottom.

HTML:

<div id="container">
    <div id="left">
        left<br />left<br />left<br />left<br />left<br />left<br />
        leftleftleftleftleftleft
    </div>
    <div id="right"></div>
</div>

CSS

#container {
    border: 1px solid red;
    float: left;
}
#left, #right {
    border: 2px solid red;
    background: #ccc;

    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}
#right {
    margin: 20px 20px 0 20px;
    padding: 20px;
    width: 100px;
}

Ответ 2

Не 100% уверен, но что-то вроде этого должно работать:

<div class="wrapper">
    <div class="orange"></div>
    <div class="green"></div>
</div>

div.wrapper div {
    position: relative;
    float: left;
    bottom: 0px;
}

Может даже не понадобиться поплавок.

Ответ 3

Я уверен, что вы получите что-то лучшее, но для начала это похоже на работу. в листе css

#box1{
background-color:#FFFF99;
width: 350px;
height: auto;
float: left;
position:absolute;
bottom: 0; 
}

#box2{
background-color:#CCFF99;
width:350px;

left: 500px; 
position: absolute;
bottom: 0; 
}

в html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<link rel="stylesheet"   type="text/css" href="try2.css" />
</head>

<body>
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 

in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 

in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 

in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 

in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

Думаю, вам нужно абсолютное левое положение для второго окна.

Ответ 4

Это была забавная практика:) Вероятно, это не лучший ответ, но он должен выполнить свою работу.

HTML:

<table>
  <tr>
    <td>
        <div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
    </td>
    <td>
      <div id="div4">nick</div>
    </td>
  </tr>
</table>

CSS

td
{
    vertical-align:bottom;
}

#div3
{
    border:solid 5px blue;
    float:left;
}
#div4
{
    width:50px;
    height:20px;
    border:solid 5px red;
    float:right;
}

см. код в jsfiddle. добавьте поля в div, если вы хотите

Ответ 5

Что сработало для меня, применял этот стиль к обеим divs:

.bottom-align { вертикально-Align: снизу; Дисплей: встроенный блок; не плавать: нет; }

Затем между двумя divs мне пришлось удалить псевдоспассу, добавив пустой комментарий:

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

Ответ 6

https://jsfiddle.net/panosang/96bnt3xa/

После нескольких часов работы и ужасной головной боли я считаю, что идеальным решением является добавление элементов margin-botton и margin-top.

Мне очень нравится добавлять определенные пиксели или изменять процент каждый раз в свой файл CSS, но я нашел его идеальным решением в своей проблеме.

Я использовал <table> вместо <div>, но он также работает с <div>.