柔性容器内的粗体文本不以内联方式显示
我有使用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