CSS表格-如何不使用表的对齐方式？(CSS RelativeLayout)
CSS表格-如何不使用表的对齐方式？(CSS RelativeLayout)
提问于 2018-02-06 01:20:18
假设我想要这样的布局：
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+在上面的例子中，我希望A和C的宽度相同，而B和D保持原样。
我也想要的高度A和B一直锁在一起，我想C保持彼此不变。
如果我使用CSS布局来尝试类似的东西，我可能会得到这样的结果：
+-------+---+
| A | B |
+---*---*---+
| C | D |
+---+-------+我想要的只是一种使HTML元素与其他HTML元素对齐的方法，而不必使用表！
Stack Overflow用户
发布于 2018-02-06 10:18:37
可以将元素显示为不是语义表的表，只使用CSS。使用display属性，则可以在标记中有div时模拟表。这篇文章
如果只希望每列中的两行与列的宽度保持一致，则应尝试将行放在列标记中，而不是相反。这是在没有预定义的维度的情况下工作的。
另外，如果为一行中的每个单元格设置相同的高度，可以简单地将它们向左浮动，并将容器宽度设置为行宽度之和。这只适用于预定义的维度。
CSS
div.c
{
width: 100%;
}
div.c>div:nth-child(2n-1)
{
width: 25%;
float: left;
background: blue;
}
div.c>div:nth-child(2n)
{
width: 75%;
float: left;
background: yellow;
}这里有一把fiddle：http：//jsfiddle.net/kdani3/dbruv/
一个更复杂的例子：http：//jsfiddle.net/kdani3/dbruv/1/
我认为它真的很简单，甚至比使用表格布局更简单。
此外，我还建议看看css网格框架，如推特启动那绝对值得一看
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007342
复制相关文章
相似问题