css - 如何在没有媒体查询的情况下处理响应式表单布局

Question

我有一个如下所示的表单布局。 我可以得到一些建议如何最好地处理这个布局:

• 在移动屏幕上，如果文本“太长”(基本上不允许过多的元素适合)，那么它会将表格分成两行

• 在桌面上，这两个元素将位于同一行。

我能否避免使用媒体查询并以某种方式使文本永不换行？一种想法是用不间断空格替换所有空格，这可能会以某种方式迫使第二个整个元素换行。

CSS 总是需要花费大量的调整时间!

Answer 1

这是对你有帮助的例子:

<div class="cont">
  <div class="image">...</div>
  <div class="contant">...</div>
</div>

.cont {
  display: flex;
  flex-direction: row;
 flex-wrap: wrap;
}
.cont .contant,
.container .image {
/* breakpoint is your 12em change. */
  flex: 1 0 12em;
} 

你可以使用的属性 最大宽度:100%； 最小宽度:50% 在你的文字中