自制流体还是弹性布局？ [英] Home-made fluid or elastic layout?
问题描述
我的大嘴再次给我带来了艰难的工作。
我有一个静态的CSS布局，其中每个元素都被定义了
按像素大小 - 很多也是！但是大部分是相对的元素。
想象一下居中的列布局，带有标题框，内容框带有
许多不同大小的小内容盒，有些跨越几个
''行''或''列''。
您如何将这种静态布局更改为
弹性/流畅的一个？它基本上需要垂直扩展，因为文本
的大小会增加。我真的不知道如何接近这个房子
卡..
很头疼！
Once again my big mouth has landed me with a tough job.
I have a static CSS layout, where each and every element has been defined
by pixel size - lots of them, too! Mostly relative elements, though.
Imagine centered column layout, with a header box, and content box with
lots of smaller content boxes of different sizes, some spanning several
''rows'' or ''columns''.
How would you go about changing this kind of static layout into
elastic/fluid one? It would need to expand vertically, mostly, as the text
size increases, basically. I really dont know how to approach this house of
cards..
Whata a headache!
推荐答案
Jam Pa：
您如何将这种静态布局改为
弹性/流体布局？
How would you go about changing this kind of static layout into
elastic/fluid one?
1.制作截图。
2.勾勒标记（笔和纸通常效果最佳）。我想你
不能改变它。
3.画出所需的布局（也许在屏幕截图的顶部）。
4.扔掉所有CSS规则都带有''display''，''position''（包括''top''，
''right''，''bottom''，''left''， ''z-index''），''float''（包括''clear''），
''visibility''，''margin''/''border''/ ''padding''（所有三个包括
属性，他们都是shorthands），''width''/''height''（包括
''分钟 - ''/ '' MAX- ''）。您可能还必须检查背景等。
5.代码照常;不要定义超过绝对必要的。
6.照常测试。
1. Make a screenshot.
2. Outline the mark-up (pen and paper often works best). I suppose you
cannot change it.
3. Draw the desired layout (perhaps on top of the screenshot).
4. Throw away all CSS rules with ''display'', ''position'' (incl. ''top'',
''right'', ''bottom'', ''left'', ''z-index''), ''float'' (incl. ''clear''),
''visibility'', ''margin''/''border''/''padding'' (all three incl. the
properties they are shorthands of), ''width''/''height'' (incl.
''min-''/''max-''). You might have to check on ''background'' etc., too.
5. Code as usual; do not define more than absolutely necessary.
6. Test as usual.
Jam Pa< an ****** @ non -anon.org>写道：
Jam Pa <an******@non-anon.org> wrote:
想象一下
John Lennon不再和我们在一起，我们更喜欢网址。
[剪辑布局说明]
您如何将这种静态布局更改为弹性/流体布局？
我们也更喜欢那些不浪费我们时间的人和谷歌的基本
信息。
很头疼！
Imagine
John Lennon is no longer with us, we prefer urls.
[snip layout description]
How would you go about changing this kind of static layout into
elastic/fluid one?
We also prefer people who don''t waste our time and Google for basic
information.
Whata a headache!
不，你只是讨厌。
-
Spartanicus
No, you are just annoying.
--
Spartanicus
Spartanicus< in ***** @ invalid.invalid>写在
新闻：d1 ******************************** @ news.spart anicus .utvinternet.ie:
Spartanicus <in*****@invalid.invalid> wrote in
news:d1********************************@news.spart anicus.utvinternet.ie:
Jam Pa< an ****** @ nonanon.org>写道：
Jam Pa <an******@non-anon.org> wrote:
想象一下
John Lennon不再和我们在一起，我们更喜欢网址。
Imagine
John Lennon is no longer with us, we prefer urls.
好吧，我可以告诉你无法想象，你这个粗鲁的人。
如果你不想想，为什么你回复这个？想象力
是让我们成为人类的原因，也是我们与机器的区别（以及一些
动物）。
下次你不能跟随jive，为什么不去玩而不是回复。
[更多1意识（没有头脑？）被删除]我们也更喜欢那些不浪费时间的人谷歌提供基本的信息。
Well, I can tell you cannot imagine, you rude person.
Why on earth did you reply to this if you dont want to imagine? Imagination
is what makes us human, what distinguishes us from machines (and some
animals, too).
Next time you CANNOT follow the jive, why not GO AWAY instead of replying.
[more 1 minded (mindless?) drivel deleted] We also prefer people who don''t waste our time and Google for basic
information.
是的，你是博格，你没有社交技巧！ *机器人语音回复*
我提供的示例非常简单，任何具有任何技能的网络编码器都可以创建我正在谈论的内容的心理形象。显然你没有地方
因为你缺乏基本技能而在这个组中使用。
Yes, you are the borg, you with no social skills! *robot voice reply*
The example I provide is so simple that any web coder with any skills could
create a mental image of what I am talking about. Clearly you have no place
psoting in this group since you lack the basic skills.
很头疼！
不，你只是讨厌。
No, you are just annoying.
最好是为了成为一个单一的傻瓜而烦恼
（古代芬兰语谚语）
对于其他读这篇文章的人，我不是在谈论一个确切的案例，而是一个
摘要，通用案件。我正在寻找指导和讨论。
初学者不需要申请。
"Its better to be annoying that to be an singleminded fool"
(ancient finnish proverb)
For anybody else reading this, I am not talking about an EXACT CASE, but an
abstract, generic case. I am looking for guidelines and discussion.
Beginners need not apply.
这篇关于自制流体还是弹性布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
