我很难并排对齐三个 div。我设法让它在 Chrome 中运行,但是当我测试其他浏览器时,它就彻底崩溃了。
我需要第一个div占用100%的可用空间,第二个div有静态宽度(160px),第三个div需要width: auto,这取决于里面的内容大小(但技术上我可以它也适用于静态宽度)。
这是我尝试过的:
.row {
display: table;
}
.col {
display: table-cell;
}
你可以在这里看到完整的代码:https://codepen.io/anon/pen/RLjGab
如您所见,这在 Chrome 中没有任何问题,但在其他浏览器中,只要我将任何内容放入列中,行的高度就会大于定义的高度,我很难发现为什么。
我也需要它在 IE9 中工作,所以 flexbox 是行不通的,但如果有人至少能为我指明如何实现这一目标的正确方向,那就太棒了。
提前致谢
最佳答案
我想通了,我只需要将 vertical-align: middle;
添加到他的列中,然后修复它。
关于html - 在没有flexbox的情况下并排对齐三个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46558852/