2 divs такой же высота с бордюром

2 divs имеют такую же высоту. Я попробовал все хаки (также с jQuery), но2 divs такой же высота с бордюром

padding-bottom: 1000px; 
margin-bottom: -1000px;

взлом работает лучше всего. В правой колонке нужна нижняя граница, но она не отображается, потому что margin-bottom: -1000px.

Есть ли решение? Я сделал jsfiddle:

http://jsfiddle.net/s92rzcsz/

источник

2015-02-17 labu77

Для более надежного решения, которое работает в кросс-браузере (IE8 +), попробуйте этот плагин http://brm.io/jquery-match-height/, это позволит вам стилизовать divs, но, пожалуйста, –

проверьте это. Это то, что вы хотите? http://jsfiddle.net/s92rzcsz/7/ –

Это интересно. Раньше я никогда не видел, чтобы выравнивание делалось так. Многие проекты, с которыми я работаю, включают встроенные блоки с равными высотами, но это всегда сложно. Я потратил некоторое время на создание js-помощника ([AlignJs] [1]), но похоже, что js-решение уже существует @DeanElliott .. черт! [1]: https://github.com/jacksonv1lle/AlignJS – Jackson

, если вам не нужно беспокоиться о IE < 8, то вы можете использовать использовать дисплей: настольный ячейки и просто дать две ячейки содержимое и применить обычную рамку к div-bottom of div1

div1, div2 { 
    display:table-cell; 
}

источник

2015-02-17 10:36:59

спасибо. Я знаю решение таблицы, но я не могу использовать его по какой-либо причине (bootstrap) и т. Д. – labu77

bootstrap не накладывает ограничений на возможность использования дисплея: table, display: table-row, display: cell в любом месте вашего кода. но есть масса обработанных примеров на css-трюках, таких как http://css-tricks.com/video-screencasts/5-columns-of-equal-height-super-simple-two-column-layout/ –

-1

У меня есть возможный ответ, если это всегда один и тот же стиль. в первом столбце div создайте проем внутри него, чтобы поставить границу,

сложная часть находится во втором столбце, вам нужно написать <br> как строки, которые вам нужны.

<div class="column"> 
something 
    <div class="test"></div>  
</div> 

.test{ 
border-bottom:2px solid #000;  
}

здесь пример https://jsfiddle.net/s92rzcsz/6/

источник

2015-02-17 10:43:08 TiGreX

<div class="container"> 
<div class="row"> 
    <div class="column"> 
     Some content!<br/> 
     Some content!<br/> 
     Some content!<br/> 
     Some content!<br/> 
     Some content!<br/> 
    </div> 
    <div class="column blackborder">Something</div> 
</div>

.container { 
    display: table; 
} 
.row { 
    display: table-row; 
} 
.column { 
    display: table-cell; 
    margin: 20px; 
    background-color: #f0f0f0; 
} 
.blackborder{ 
border-bottom:2px solid #000; 
}

http://jsfiddle.net/s92rzcsz/5/

вы можете добиться этого с помощью таблицы

источник

2015-02-17 10:43:09 jmw5598

2 divs такой же высота с бордюром

ответ

Смежные вопросы