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元素对齐的方法，而不必使用表！
回答 2
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用户
发布于 2018-02-06 10:22:16
我认为使用纯css，没有Width，而且不使用table你可以用柔性布局
代码
HTML
<section class="flexrow">
<div class='item'>1asdf</div>
<div class='item'>2</div>
</section>
<section class="flexrow">
<div class='item'>1</div>
<div class='item'>2</div>
</section>CSS
.flexrow {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
margin-bottom: 10px;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
-o-flex: none;
}
.item {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
-o-flex: 1;
margin: auto 10px;
border-radius: 5px;
border:1px solid black;
}这是JsFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007342
复制相关文章
相似问题