Question

我的客户想要一个屏幕，在足够高分辨率的显示器上，如下所示：

First name [textbox1a]  Translation  [textbox1b]
Last name  [textbox2a]               [textbox2b]
Street     [textbox3a]               [textbox3b]

等。（屏幕以2种语言显示信息，但我们无需深入了解此问题的详细信息。）

如果屏幕太窄而不适合 - 比如在平板电脑上 - 他们希望将其更改为：

First name   Translation
[textbox1a]  [textbox1b]
Last name
[textbox2a]  [textbox2b]
Street
[textbox3a]  [textbox3b]

在一个非常狭窄的屏幕上 - 比如一部手机：

First name
[textbox1a]
Translation
[textbox1b]

Last name
[textbox2a]
[textbox2b]

Street
[textbox3a]
[textbox3b]

我真的不想让标签固定宽度，因为这会阻止用户调整文本大小。在宽度可变的情况下，我无法使所有东西都浮动：左边因为柱子没有排列。我正在修改使用display：table-cell et al，但这很棘手，因为每行中的内容会发生变化。如果我使用@media从4列切换到2到1，我想我可以做到这一点，但这假设我知道切换布局时的确切像素数，我不会对标签的宽度做出假设

任何想法如何做到这一点？

Answer 1

因此，我提出的解决方案是检查哪个列是最宽的。然后将该宽度应用于每列，同时使列“浮动”。这样他们总是排队。

var maxWidth = 0;

$('.box').each(function() {
    var width2 = $(this).width();
    if(width2 > maxWidth){
        maxWidth = width2;
    }
});

    $('.box').css("width", maxWidth);

这是一个完整的JSFiddle，你可以编辑框的内容来改变它们的大小来测试它。

http://jsfiddle.net/na50mxtj/

响应式设计：如何调整列数？

1 个答案: