Question

我正在尝试制作3个响应列，每个列之间有一个分隔符。由于分隔符不能是DIV的整个高度，我使用表格来获得所需的效果。

现在，这些列看起来我是如何以大分辨率需要它们的，但是，只要您开始缩放浏览器，列大小就不会保持不变。它们的宽度不如我想象的那么宽。

现在通常情况下，我不会在宽度上混合px和％，但是，因为我想要一个响应式网站，但也一直有列分隔符2px - 我混合它们，我相信这可能是我的问题。

我试过浮动列，但我无法获得我想要的边框。我真的没有想法。

是否有人知道实现这种影响的分辨率或更简洁的方法？网址链接为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

就我个人而言，我会使用flex-box。但是它确实有一些兼容性要求，请查看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>

CSS表列

1 个答案: