Flex容器内的粗体文本未显示为内联-Java 学习之路

我有使用flex的div容器 . 我的flex子容器里面有一个大胆的衰老 .

例

Lorem ipsum dolor sit amet，consectetur adipiscing elit . Nunc at lectus vitae libero pulvinar fringilla . Nullam vel vestibulum orci .

但是，当我创建我的Flex容器时，它不会使粗体文本内联 . 它在常规文本和粗体文本之间创建一个块 .

例

Lorem ipsum dolor sit amet，consectetur adipiscing elit . Nunc at lectus vitae libero pulvinar fringilla . Nullam vel vestibulum orci .

我按如下方式设置了我的flex容器：

.flexparent { display: flex; flex-direction: row; justifty-content: center; flex-wrap: wrap-reverse }
.flexchild1 { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 65%; margin-right: 4%;}
.flexchild2 { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 35%;}

我理想的解决方案是这样的， .flexchild1 是绿色， .flexchild2 是黄色 .

enter image description here

1 回答

如果您要使用Flex容器，请记住所有子元素将成为弹性项目并垂直或水平堆叠，具体取决于 flex-direction .

所以，如果我们考虑这个代码：

<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

虽然 <b> ， <span> 和 <i> 元素在block formatting content中是内联级别的...

.flex-container {
    display: block;
    flex-direction: row;
    background-color: lightgreen;
}

span { color: red; }

<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

flex formatting context中所有子元素都被封锁了......

.flex-container1 {
    display: flex;
    flex-direction: row;
    background-color: lightgreen;
}
.flex-container2 {
    display: flex;
    flex-direction: column;
    background-color: lightgreen;
}
span { color: red; }

<div class="flex-container1"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

<hr>

<div class="flex-container2"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

您可能想要做的是将文本包装在Flex容器中自己的块级容器中 .

.flex-container1 {
    display: flex;
    flex-direction: row;
    background-color: lightgreen;
}

.flex-container2 {
    display: flex;
    flex-direction: column;
    background-color: lightgreen;
}

span {
    color: red;
}

<div class="flex-container1">
    <div>
        <b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
    </div>
</div>

<hr>

<div class="flex-container2">
    <div>
        <b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
    </div>
</div>

回复于 2024-04-29T17:22:49+08:00

Flex容器内的粗体文本未显示为内联

1 回答

相关问题