gpt4 book ai didi

html - 如何为内部设置外部元素的 100% 高度

转载 作者:太空宇宙 更新时间:2023-11-03 21:09:24 26 4
gpt4 key购买 nike

我有一个 flexbox“表格”,我主要是想在上面放一些有趣的东西。我遇到的问题是无法用 HTML 编写

我目前的成绩enter image description here

我试图得到的结果 enter image description here

我尝试在没有内部 divsspans 的情况下通过执行 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>

关于html - 如何为内部设置外部元素的 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48642872/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com