所以我的问题是,我用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;
}