I am trying to create a CSS Table based layout which has an even spacing/border around each table cell and making sure that the table-cells are always the same height. Here is an example of what I am trying to achieve:
我正在尝试创建一个基于CSS表的布局,它在每个表单元格周围都有一个均匀的间隔/边框,并确保表单元格始终保持相同的高度。下面是我正在努力实现的一个例子:
My HTML currently looks like this:
我的HTML目前看起来是这样的:
.two-col.body-width {
max-width: 1138px;
}
.two-col {
display: table;
clear: both;
margin: 0 auto;
padding: 20px 0;
width: 100%;
box-sizing: border-box;
border-spacing: 25px 0px;
}
.two-col > .col_container.align-top {
vertical-align: top;
}
.layout .section-tout {
position: relative;
padding: 20px 40px 48px;
background: #f4f4f3;
border-left: 5px solid #da202a;
}
.two-col > .col_container {
width: 50%;
display: table-cell;
text-align: left;
vertical-align: middle;
box-sizing: border-box;
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<!-- content goes here -->
</div>
<div class="col_container align-top section-tout">
<!-- content goes here -->
</div>
</section>
Here is a working example: https://jsfiddle.net/grzkgdp3/1/
这里有一个工作示例:https://jsfiddle.net/grzkgdp3/1/
What I have here is almost perfect, but as you can see from the image I updated I need the spacing / border to be doubled in the middle and I cannot see an intelligent way of doing this.
我这里的东西几乎是完美的,但是你可以从我更新的图片中看到,我需要在中间加倍间距/边框,我看不到一个聪明的方法来做到这一点。
I can see a solution where I used border: 25px solid white;
on the tabel-cell. This solves my spacing issue but because I need the red border on the left, I then have to apply this using the :after
pseudo element which makes things a bit messy.
我可以看到一个我使用边界的解决方案:25px纯白色;tabel-cell。这解决了我的间隔问题,但是因为我需要左边的红色边框,所以我必须使用:after pseudo元素来应用它,这会使事情变得有点混乱。
If anyone has a solid solution that can help it would be great to hear it.
如果有人有一个可靠的解决方案,可以帮助它,这将是伟大的听到它。
Cheers!
干杯!
Update
更新
Unfortunately I cannot use a flexbox
solution as I need to support all modern browser and IE9 and above.
不幸的是,我不能使用flexbox解决方案,因为我需要支持所有的现代浏览器和IE9及以上版本。
2 个解决方案
#1
1
Sometimes we must bend to support compatibility. I used linear-gradients
to achieve the result.
有时我们必须支持兼容性。我使用线性渐变来实现结果。
body {
background: white;
}
.two-col.body-width {
max-width: 1138px;
}
.two-col {
display: table;
clear: both;
margin: 0 auto;
padding: 20px 0;
width: 100%;
box-sizing: border-box;
}
.two-col > .col_container.align-top {
vertical-align: top;
}
.layout .section-tout p {
position: relative;
padding: 20px 40px 48px;
margin: 0;
}
.two-col > .col_container {
width: 50%;
display: table-cell;
text-align: left;
vertical-align: middle;
box-sizing: border-box;
padding: 0px 25px;
background-image: linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 calc(100% - 25px), transparent 0);
background-image: -ms-linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 -ms-calc(100% - 25px), transparent 0);
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<p>
See how there is different amounts of content, but the cells are always the same height, this is very important!
</p>
</div>
<div class="col_container align-top section-tout">
<p>
Hi!
</p>
</div>
</section>
工作小提琴
Working fiddle (without calc)
工作小提琴(没有钙)
#2
1
Have you considered Flexbox
你考虑过Flexbox
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: white;
}
.two-col.body-width {
max-width: 1138px;
padding: 25px;
}
.two-col {
display: flex;
margin: 0 auto;
box-sizing: border-box;
}
.layout .section-tout {
position: relative;
background: pink;
padding: 20px;
border-left: 5px solid #da202a;
flex: 0 1 50%;
display: flex;
}
.two-col > div:first-child {
margin-right: 50px;
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<p>
See how there is different amounts of content, but the cells are always the same height, this is very important!
</p>
</div>
<div class="col_container align-top section-tout">
<p>
Hi!
</p>
</div>
</section>
#1
1
Sometimes we must bend to support compatibility. I used linear-gradients
to achieve the result.
有时我们必须支持兼容性。我使用线性渐变来实现结果。
body {
background: white;
}
.two-col.body-width {
max-width: 1138px;
}
.two-col {
display: table;
clear: both;
margin: 0 auto;
padding: 20px 0;
width: 100%;
box-sizing: border-box;
}
.two-col > .col_container.align-top {
vertical-align: top;
}
.layout .section-tout p {
position: relative;
padding: 20px 40px 48px;
margin: 0;
}
.two-col > .col_container {
width: 50%;
display: table-cell;
text-align: left;
vertical-align: middle;
box-sizing: border-box;
padding: 0px 25px;
background-image: linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 calc(100% - 25px), transparent 0);
background-image: -ms-linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 -ms-calc(100% - 25px), transparent 0);
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<p>
See how there is different amounts of content, but the cells are always the same height, this is very important!
</p>
</div>
<div class="col_container align-top section-tout">
<p>
Hi!
</p>
</div>
</section>
工作小提琴
Working fiddle (without calc)
工作小提琴(没有钙)
#2
1
Have you considered Flexbox
你考虑过Flexbox
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: white;
}
.two-col.body-width {
max-width: 1138px;
padding: 25px;
}
.two-col {
display: flex;
margin: 0 auto;
box-sizing: border-box;
}
.layout .section-tout {
position: relative;
background: pink;
padding: 20px;
border-left: 5px solid #da202a;
flex: 0 1 50%;
display: flex;
}
.two-col > div:first-child {
margin-right: 50px;
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<p>
See how there is different amounts of content, but the cells are always the same height, this is very important!
</p>
</div>
<div class="col_container align-top section-tout">
<p>
Hi!
</p>
</div>
</section>