CSS бок о бок divs с фиксированной ссылкой внизу

Question

У меня возникла проблема при позиционировании трех разделов бок о бок.

Эти три div содержат обычный текст, но также имеют ссылку внизу.

<div id="parent"> 
    <h1>Description</h1> 
    <div class="item"> 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> 
     <a href="#">Bottom</a> 
    </div> 
    <div class="item"> 
     <p>erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p> 
     <a href="#">Bottom</a> 
    </div> 
    <div class="item"> 
     <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p> 
     <a href="#">Bottom</a> 
    </div> 
</div> 

Чтобы получить этот отзывчивый, детали inline-block с шириной 32%.

div#parent { 
    text-align: center; 
    width: 90%; 
    margin: 0 auto; 
} 

div#parent div.item { 
    display: inline-block; 
    width: 32%; 
    vertical-align: top; 
} 

Теперь проблема заключается в том, что при изменении размера окна высота элементов различна. Я хочу, чтобы ссылки в нижней части элементов, чтобы быть в том же положении, как это:
Но актуальным это выглядит следующим образом:
Я использовал JavaScript, чтобы установить эти элементы в одной и той же высоте, но как я могу получить эти ссылки на одну и ту же позицию? Я знаю, что это можно сделать, установив пункт position: relative;, а a - position: absolute; bottom: 0;, но затем text-align: center; больше не работает.

I made a JSFiddle for you to understand my problem.

Надеется, что вы можете мне помочь.

Answer 1

Если вы равные высоты с JavaScript для div.item, то:

div#parent div.item { 
    display: inline-block; 
    width: 32%; 
    vertical-align: top; 
    position: relative; 
    padding-bottom: 20px; 
} 

div#parent div.item a { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
} 

Answer 2

EDIT 2: Поскольку вы просили решение без position:relative/absolute см this answer вместо.

Мой старый (вроде недействителен) Ответ:

Я обновил свою скрипку: https://jsfiddle.net/vgxocqw7/1/

нового CSS:

div#parent div.item { 
    display:table-cell; 
    width: 32%; 
    vertical-align: top; 
    position:relative; 
} 
div#parent div.item a.bottom{ 
    position:absolute; 
    bottom:0; 
} 

, а также добавил class="bottom" к вашим ссылкам

вам возможно, потребуется выполнить некоторую работу по позиционированию «нижних» ссылок, они не совсем центрированного

EDIT: Удалены JS

https://jsfiddle.net/vgxocqw7/5/

Answer 3

С этим кодом DIV будет по центру на дне даже при использовании position:absolute:

div#parent div.item { 
    float: left; 
    width: 32%; 
    position: relative; 
    min-height:160px; 

} 

a { 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    left: 0; 
    right: 0; 
    bottom:0; 
} 

Вот example.

Answer 4

Обновление CSS, как показано ниже:

JSfiddle

div#parent div.item { 
    display: table-cell; 
    width: 32%; 
    position: relative; 
    padding-bottom: 20px; 
    vertical-align: top;   
} 

div#parent div.item a { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
} 

Answer 5

Поскольку вы просили решение безposition: absolute; bottom: 0; я даю вам следующий подход.

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

<div class="content-wrapper"> 
    <div class="content"> 
     Text etc... 
    </div> 
    <a href="target...">Linktext</a> 
</div> 

Для каждых трех контейнеров содержимого. Работая с вашим javascript resizeFunction, ссылки постоянно растут на одной высоте.

Обратите внимание, что ваш div.content-wrapper является display:inline-block; сейчас, но ваш div.content нет.

Greetz

Answer 6

Flex может сделать это очень легко, но с некоторыми чем меньше поддержки браузера. Другой способ - использовать display: table, которые имеют очень хорошую поддержку (вплоть до IE8), в конце вы найдете образец, используя это.

Еще один способ, мышление в терминах «строки», как это, где нет абсолютного положения, нет сценария и сохранить ваши ссылки в нижней части, все по центру.

Update

В соответствии с просьбой, и сделать его более отзывчивым, я добавил медиа-запрос.

Запустите фрагмент на полной странице и измените размер браузера, чтобы увидеть его в действии.

Следует отметить, что это все еще «без использования гибкого» решения.

Update 2

Добавлен display: table

#parent { 
 
    text-align: center; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
#parent div.item { 
 
    display: inline-block; 
 
    width: 32%; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 
#parent div.item ~ div.item { 
 
    margin-left: 1%; 
 
} 
 

 
#parent .contents a { 
 
    display: none; 
 
} 
 

 
@media (max-width: 500px) { 
 
    #parent div.item { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
    #parent .contents a { 
 
    display: inline; 
 
    } 
 
    #parent .links a { 
 
    display: none; 
 
    } 
 
}

<div id="parent"> 
 
    <div class="wrapper contents"> 
 
     <h1>Description</h1> 
 
     <div class="item"> 
 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
     <div class="item"> 
 
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea duo rebum. Stet clita kasd gubergren, no sea duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
     <div class="item"> 
 
      <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
    </div> 
 
    <div class="wrapper links"> 
 
     <div class="item"> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
     <div class="item"> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
     <div class="item"> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
    </div> 
 
</div>

Таблица версия

#parent { 
 
    display: table; 
 
    text-align: center; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
#parent div.item { 
 
    display: table-cell; 
 
    width: 32%; 
 
    vertical-align: top; 
 
    position: relative; 
 
    padding-bottom: 20px; 
 
} 
 
#parent div.item ~ div.item { 
 
    padding-left: 1%; 
 
} 
 
#parent div.item a { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
@media (max-width: 500px) { 
 
    #parent { 
 
    display: block; 
 
    } 
 
    #parent div.item { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
}

<div id="parent"> 
 
    <div class="wrapper"> 
 
     <h1>Description</h1> 
 
     <div class="item"> 
 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
     <div class="item"> 
 
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea duo rebum. Stet clita kasd gubergren, no sea duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
     <div class="item"> 
 
      <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p> 
 
      <a href="#">Bottom</a> 
 
     </div> 
 
    </div> 
 
</div>