柔性容器内的粗体文本不以内联方式显示

我有使用flex的div容器。 我灵活的儿童容器内有一个大胆的衰老。

Lorem ipsum dolor坐在amet,consectetur adipiscing elit。 Nunc at lectus vitae libero pulvinar fringilla。 Nullam vel vestibulum orci。

但是,当我创建我的柔性容器时,它并不是将粗体文本内联。 它在常规文本和粗体文本之间创建一个块。

Lorem ipsum dolor

坐在一起,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是黄色。


如果您打算使用弹性容器,请记住,所有子元素都将变为弹性项目并根据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>元素在块格式化内容中是内联级别的......

.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>
链接地址: http://www.djcxy.com/p/75993.html

上一篇: Bold text inside a flex container not appearing inline

下一篇: Creating paragraph layout