首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS表格-如何不使用表的对齐方式?(CSS RelativeLayout)

CSS表格-如何不使用表的对齐方式?(CSS RelativeLayout)
EN

Stack Overflow用户
提问于 2018-02-06 01:20:18
回答 2查看 0关注 0票数 0

假设我想要这样的布局:

+---+---+
| A | B |
+---+---+
| C | D |
+---+---+

在上面的例子中,我希望A和C的宽度相同,而BD保持原样。

我也想要的高度AB一直锁在一起,我想C保持彼此不变。

如果我使用CSS布局来尝试类似的东西,我可能会得到这样的结果:

+-------+---+
|   A   | B |
+---*---*---+
| C |   D   |
+---+-------+

我想要的只是一种使HTML元素与其他HTML元素对齐的方法,而不必使用表!

EN

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

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100007342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档