Столбцы таблицы CSS

Question

Я пытаюсь сделать 3 ответных столбца с разделителем между ними. Поскольку разделитель не может быть всей высотой DIV, я использовал таблицы для получения желаемого эффекта.

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

Теперь, как правило, я бы не смешивал px и% в ширинах, поскольку мне нужен отзывчивый веб-сайт, но также имел разделитель столбцов 2px во все времена - я их смешивал, я считаю, что это может быть моей проблемой.

Я пробовал плавать столбцы, но я не мог получить границу, как я хотел. У меня действительно нет идей.

Кто-нибудь знает разрешение или более чистый метод для достижения этого эффекта? Ссылка URL является here.

.homepage-section-two{ 
    text-align: center; 
    display:table; 
    padding:0px 20px; 
    margin-bottom:80px;} 

.homepage-section-two-column-one{ 
    display: table-cell; 
    vertical-align: top; 
    width: 33.333%; 
    margin-left:-25px; 
    padding-left: 25px; 
    padding-right: 25px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;} 

.homepage-section-two-column-two{ 
    display: table-cell; 
    vertical-align: top; 
    width: 33.333%; 
    padding-left: 25px; 
    padding-right: 25px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;} 

.homepage-section-two-column-three{ 
    display: table-cell; 
    vertical-align: top; 
    width: 33.333%; 
    margin-right:-25px; 
    padding-left: 25px; 
    padding-right: 25px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;} 

.homepage-section-two .vertical-divider{ 
    border-top: 280px solid #fff; 
    border-bottom: 0;} 

Answer 1

Лично я хотел бы использовать гибкий ящик для этого. Однако у него есть некоторые требования к совместимости, посмотрите на ссылку this для получения дополнительной информации.

Двигаясь быстро на, вот мое предложение:

div{ 
 
    display:flex; 
 
    border-top: 3px solid black; 
 
    border-bottom: 3px solid black; 
 
} 
 
img{ 
 
    flex:1; 
 
    height:450px; 
 
} 
 
img:nth-of-type(2){ 
 
    padding: 0 5px; 
 
}

<div> 
 
    <img src="http://dev.charlyanderson.co.uk/TomMaryniak/wp-content/uploads/2015/06/home-one.jpg"> 
 
    <img src="http://dev.charlyanderson.co.uk/TomMaryniak/wp-content/uploads/2015/06/home-two.jpg"> 
 
    <img src="http://dev.charlyanderson.co.uk/TomMaryniak/wp-content/uploads/2015/06/home-three.jpg"> 
 
</div>