我有一个 flexbox“表格”,我主要是想在上面放一些有趣的东西。我遇到的问题是无法用 HTML 编写
我目前的成绩
我试图得到的结果
我尝试在没有内部 divs
和 spans
的情况下通过执行 margin:auto
来做到这一点,但不幸的是它重新定位了左边的边界和右边到中间 :( 所以当前结果的代码是:
.flex-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-container .middle {
flex: 1;
display: flex;
}
.top {
padding-top: 30px;
border: 2px solid #05788D;
display:flex;
}
.leftSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
}
.rightSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
border-left-style: none;
}
.firstOption
{
border: 2px solid #05788D;
border-top-style: none;
border-bottom-style:none;
}
.anotherOption
{
border: 2px solid #05788D;
border-top-style: none;
border-bottom-style:none;
border-left-style:none;
}
<div class="flex-container">
<div class="top">
<div style="width:50%;">
<span class="firstOption">One option</span>
</div>
<div style="width:50%;">
<span class="anotherOption">Another option</span>
</div>
</div>
<div class="middle">
<div class="leftSide">
left
</div>
<div class="rightSide">
right
</div>
</div>
</div>
只需使用 text-align
来控制 span
的文本对齐方式,并在 span
中使用 padding 并且不要忘记制作他们内联 block :
.flex-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-container .middle {
flex: 1;
display: flex;
}
.top {
border: 2px solid #05788D;
display: flex;
}
.top div {
flex:1;
}
.leftSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
}
.rightSide{
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
border-left-style: none;
}
.firstOption {
text-align:right;
}
.firstOption span,.anotherOption span{
border: 2px solid #05788D;
padding-top: 30px;
display:inline-block;
}
<div class="flex-container">
<div class="top">
<div class="firstOption"><span>One option</span></div>
<div class="anotherOption"><span>Another option</span></div>
</div>
<div class="middle">
<div class="leftSide">
left
</div>
<div class="rightSide">
right
</div>
</div>
</div>
我是一名优秀的程序员,十分优秀!