假设我想要这样的布局:
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
在上面的例子中,我希望A和C的宽度相同,而B
和D
保持原样。
我也想要的高度A
和B
一直锁在一起,我想C
保持彼此不变。
如果我使用CSS布局来尝试类似的东西,我可能会得到这样的结果:
+-------+---+
| A | B |
+---*---*---+
| C | D |
+---+-------+
我想要的只是一种使HTML元素与其他HTML元素对齐的方法,而不必使用表!
发布于 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
https://stackoverflow.com/questions/-100007342
复制相似问题