挑战CSS布局 [英] Challenging CSS Layout

问题描述

我有一个通用设计，我认为在不使用表格的情况下几乎不可能创建。即使有桌子，也不是很容易打好它。


我把布局模仿为PDF。您可以下载 CSS Challenge.pdf 或转到< a rel =nofollowhref =http://www.mediafire.com/?8xev99nm9zytarget =_ blank>这里。


最简单的例子问题是我有一个我想要左对齐的图像，然后在右边我有一列文字。文本应垂直对齐到图片的底部。这会在文本上方留下一些空白，但无法确切知道这个空白的高度。所有这一切都可以通过定位来实现。但我的问题是我希望单行文本在空白中居中，我甚至不知道空白有多大。

I have a general design that I think is near impossible to create without using tables. Even with tables it wouldn''t be a very easy to lay it out.

I mocked up the layout as a PDF. You can download CSS Challenge.pdf or go here.

The simplest example of the problem is that I have an image that I want to align left, then on the right I have a column of text. The text should by vertically-aligned to the bottom of the picture. This leaves some whitespace above the text, but there is no way to know exactly what height this whitespace is. All of that is do-able with positioning. But my problem is that I want a single line of text to be centered in the whitespace, and I don''t even know how big the whitespace is.

推荐答案

**感叹**

不要挑战我的蚱蜢。

**sigh**
Don''t challenge me grasshopper.

这是从PDF导出的图像，使其更容易查看问题而无需下载任何内容。

更简单的布局

复杂布局

Here are images exported from the PDF to make it a little easier to view the problem without downloading anything.

Easier Layout

Complex Layout

这是否意味着你有解决方案drhowarddrfine？因为我在这里完全失败了。甚至有什么想法？

Does that mean you have the solution drhowarddrfine? Because I''m at a total loss here. Any ideas even?

这篇关于挑战CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！