我希望列在同一行并没有换行符(灵活框)



所以我的问题是,我用Wordpress Gutenberg编辑器并排设置了两列,我希望列文本1位于我创建的组的左侧,栏文本2在右侧。

但是,当我调整到较小的屏幕大小时,列文本2行会断开为其他行。有没有任何解决方案可以让两列文本保持在同一行,无论我调整屏幕大小有多小。

以下是我的html和css代码的简单版本:

https://jsfiddle.net/1ac92xhu/

HTML:


<div class="wp-block-columns">
<div class="wp-block-column  column-1" style="flex-basis:80%">
<p>Column text1</p>
</div>
<div class="wp-block-column column-2 style="flex-basis:20%">
<p>Column text 2</p>
</div>

CSS:

.column-1 {

display: flex;
justify-content: flex-start;
flex-basis: 80%;
padding-left: 0.5rem;
}
.column-2 {
break-inside: avoid-column;
display: flex;
justify-content: right;
flex-wrap: nowrap;
text-transform: uppercase;
padding-right: 1rem;
}
Add This "word-break: keep-all;"

.列-2{

break-inside: avoid-column;
display: flex;
justify-content: right;
flex-wrap: nowrap;
text-transform: uppercase;
padding-right: 1rem;

}

希望这能有所帮助:

.wp-block-columns {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}

相关内容

  • 没有找到相关文章

最新更新