想要用流动的文本围绕图像框 [英] Want box around an image with flowing text
问题描述
我看过一个使用显示器的页面，特别是显示表用盒子做了一些整洁的东西，但基本上它只适用于Mozilla
浏览器。与Opera和Safari相比非常糟糕（我没有IE浏览器，但我怀疑我也不会工作）。
我想用CSS在页面中间放一些框。
页面应该是流畅的，但是这些框都需要相同的宽度，这可以根据观众使用的页面大小而变化。
我用边框来制作盒子。
每个盒子的左上方需要一个h2，只需
触摸方框。 h2也在一个狭窄的盒子里，但有自己的颜色和背景颜色，可能占宽度的40％，文字
对齐。 />
在每个方框内可能是一个（或者可能但不太可能更多）
段落的文字，可能流动一个或（可能）更多
图片。我希望能够决定每个盒子的哪一面
图像。我希望文本能够在图像周围流动。
我没有任何很好的CSS问题让文本流过
thumbnail图片来自 http://www.sheltersrus.com.au ，这似乎有效
当你调整页面或文本大小或缩放它时很好。但是我好了b $ b很明显我在那里尝试的很幸运。
当我尝试用盒子做同样的东西时，我的h2盒子分崩离析，
和我的（大于缩略图）图像从我的盒子里捅出来。我在 http：//www.architectqueensland上有一个
的样本.com / trial1.html 包含在页面中的
CSS以便于操作。 CSS和HTML都
验证（至少，当我不在CSS中包含CSS
页面时它们会这样做。）
任何人都有任何建议。我正试图尽可能多地将HTML标签拉出页面
，并尽可能地简化所有内容。
-
http://www.ericlindsay.com
I''ve seen a page using display, and especially display table that did
some neat things with boxes, but basically it only worked with Mozilla
browsers. Fell over fairly badly with Opera and Safari (I don''t have
IE, but I have my suspicions that wouldn''t work either).
I''d like to use CSS to put some boxes down the middle of a page. The
page is intended to be fluid, but the boxes all need to be the same
width, which can be variable according to page size the viewer uses.
I''ve used border to make the boxes.
Each box needs to have an h2 at the top left outside the box, just
touching the box. The h2 is also in a narrow box, but with its own
color and background color, taking maybe 40% of the width, with the text
aligned right.
Within each box can be probably one (or possibly but unlikely more)
paragraphs of text, flowing around probably one or (possibly) more
images. I''d like to be able to decide which side of each box the
image(s) go. I''d like the text to flow around the images.
I didn''t have any great CSS problems getting text to flow around a
thumbnail image at http://www.sheltersrus.com.au and that seems to work
pretty well when you resize the page or text or zoom it. However I
obviously just lucked out in what I am trying there.
When I try the same sort of thing with boxes, my h2 boxes fall apart,
and my (larger than thumbnail) images poke out of my boxes. I have a
sample at http://www.architectqueensland.com/trial1.html which has the
CSS included in the page for ease of manipulation. CSS and HTML both
validate (at least, they do when I don''t include the CSS in the HTML
page).
Anyone have any suggestions. I''m trying to pull as many HTML tags out
of the page as I can, and simplify everything as much as I can.
--
http://www.ericlindsay.com
推荐答案
Eric Lindsay< NO ********** @ ericlindsay.com>写道：
Eric Lindsay <NO**********@ericlindsay.com> wrote:
我看过一个使用显示的页面，特别是显示表用盒子做了一些整洁的东西，但基本上它只适用于Mozilla
浏览器。
URL？
当我尝试使用相同类型的盒子时，我的h2盒子会分开，
和我的（大于缩略图）图像从我的盒子里捅出来。我在 http://www.architectqueensland.com/trial1上有一个
样本.html ，页面中包含
CSS，便于操作。
在每个box的结束div之前：< div style =" clear：both">< / div>
CSS和HTML都验证（至少，当我不在HTML
页面中包含CSS时它们会这样做。）
I''ve seen a page using display, and especially display table that did
some neat things with boxes, but basically it only worked with Mozilla
browsers.
URL?
When I try the same sort of thing with boxes, my h2 boxes fall apart,
and my (larger than thumbnail) images poke out of my boxes. I have a
sample at http://www.architectqueensland.com/trial1.html which has the
CSS included in the page for ease of manipulation.
Before the closing div of each "box": <div style="clear:both"></div>
CSS and HTML both
validate (at least, they do when I don''t include the CSS in the HTML
page).
添加< style>所需的type属性元素作为验证者
告诉你。
-
Spartanicus
Add the required type attribute to the <style> element as the validator
tells you to.
--
Spartanicus
在文章中
< 9g ******************************** @ news.spartanic us.utvinternet.ie>，
Spartanicus< in ***** @ invalid.invalid>写道：
In article
<9g********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:
Eric Lindsay< NO ********** @ ericlindsay.com>写道：
Eric Lindsay <NO**********@ericlindsay.com> wrote:
我看过一个使用显示的页面，特别是显示表用盒子做了一些整洁的东西，但基本上它只适用于Mozilla
浏览器。
URL？
I''ve seen a page using display, and especially display table that did
some neat things with boxes, but basically it only worked with Mozilla
browsers.
URL?
不在互联网上。如果我可以收集它的所有部分，我可以看到
关于把它放在某个地方。嗯，实际上，我大部分时间都缺少图形。我可能会找到HTML和CSS，如果那个
就足够了吗？
我特别喜欢它让你使用三列布局的方式
页脚，地址的三个部分。但它使用的是显示
表格的东西。
Not on the internet. If I can collect all the pieces of it I can see
about putting it up somewhere. Well, actually, I would mostly be
missing the graphics. I can probably find the HTML and CSS, if that
would be sufficient?
I particularly liked the way it let you use a three column layout in the
footer, for the three parts of the address. But it was using display
table stuff.
和我的（大于缩略图）图像从我的框中戳出来。
and my (larger than thumbnail) images poke out of my boxes.
在每个box的结束div之前：< div style =" clear：both">< / div>
Before the closing div of each "box": <div style="clear:both"></div>
我以为我曾经尝试过，没有任何成功。清楚是我在两列布局中使用的
。
但是我发现使用overflow：auto;在main_box div中似乎
具有将所有内容保存在其框中的预期结果。我确实找到了
讨论使用overflow：hidden;触发更少的错误。由于
我的布局是流动的，我可以试试这个。
将所需的类型属性添加到< style>元素作为验证器
告诉你。
I thought that I had tried that, without any success. Clear was what I
used in my two column layout.
However I found that using overflow: auto; in the main_box div seemed to
have the desired result of keeping everything in its boxes. I did find
a discussion that using overflow: hidden; triggered fewer bugs. Since
my layout is intended to be liquid, I may try this.
Add the required type attribute to the <style> element as the validator
tells you to.
Opps，对不起。现在纠正了。谢谢Spartanicus。
修改后的html和css验证测试页面位于
http://www.architectqueensland.com/trial2.html
我还有几个问题。
我希望底部的蓝色地址框位于页面底部的三列
布局中。谷歌为我提供了一个很好的三篇专栏文章清单，所以我想我会在其中一篇文章中找到一些东西。然而，总是欢迎指向最好的治疗指示
。
我想在该页面的左上角放置一个徽标，其中包含
来自样式表的图像。我设法用
http://www.sheltersrus.com.au 但是当我给它一个像top：10px这样的位置时，我似乎无法重复
定位它的技巧。左：10px;在
的事实上，鉴于CSS
是错误的，我无法看到我如何设置它原来的位置。使用相同的代码（有或没有错误的
边界位）只是不起作用。有什么指针吗？那一点
让我疯了，因为我在前面有一个有效的例子和
不能复制它。
-
http://www.ericlindsay.com
Opps, sorry about that. Now corrected. Thanks Spartanicus.
The revised html and css validated test page is at
http://www.architectqueensland.com/trial2.html
I still have several problems with it.
I''d like the blue address boxes at the bottom to be in a three column
layout all level across the bottom of the page. Google has provided a
nice list of three column articles for me to read, so I imagine I''ll
find something in one of them. However pointers to the best treatment
are always welcome.
I would like to put a logo in the top left corner of that page, with the
image coming via the stylesheet. I managed to do this with
http://www.sheltersrus.com.au but I can''t seem to repeat the trick of
positioning it when I give it a position like top: 10px; left: 10px; In
fact, I can''t see how I managed to position it originally, given the CSS
is wrong. Using the same code (with or without the wrong
borderposition bit) just doesn''t work. Any pointers on that? That bit
is driving me nuts, given I have a working example in front on me and
can''t duplicate it.
--
http://www.ericlindsay.com
Eric Lindsay< NO ********** @ ericlindsay.com>写道：
Eric Lindsay <NO**********@ericlindsay.com> wrote:
>我看过一个使用显示的页面，特别是显示表格
>带盒的一些整洁的东西，但基本上它只适用于Mozilla
>浏览器。
URL？
>I''ve seen a page using display, and especially display table that did
>some neat things with boxes, but basically it only worked with Mozilla
>browsers.
URL?
不在互联网上。如果我可以收集它的所有部分，我可以看到
关于把它放在某个地方。嗯，实际上，我大部分都会错过图形。我可以找到HTML和CSS，如果那个
就足够了吗？
Not on the internet. If I can collect all the pieces of it I can see
about putting it up somewhere. Well, actually, I would mostly be
missing the graphics. I can probably find the HTML and CSS, if that
would be sufficient?
当然。
我特别喜欢这种方式它允许您在
页脚中使用三列布局，用于地址的三个部分。但它正在使用显示器表格。
我发现很难相信Safari或Opera会出现问题
it，display：table * stuff（aka CSS tables）不支持由IE怀疑
怀疑。
Sure.
I particularly liked the way it let you use a three column layout in the
footer, for the three parts of the address. But it was using display
table stuff.
I find it hard to believe that Safari or Opera would have a problem with
it, display:table* stuff (aka CSS tables) is not supported by IE as you
suspected.
在每个box的结束div之前：< div style = clear：both>>< / div>
Before the closing div of each "box": <div style="clear:both"></div>
我以为我曾尝试过，但没有任何成功。
I thought that I had tried that, without any success.
在IE，Opera，Gecko中为我工作：
http ：//homepage.ntlworld.ie/spartanicus/trial1.html
你用什么浏览器进行测试？
但是我发现了使用overflow：auto;在main_box div中似乎具有将所有内容保存在其框中的预期结果。
无法在IE / win中工作。
经过修改的html和css验证测试页面位于
http://www.architectqueensland.com/trial2.html
我还有几个问题。
我希望底部的蓝色地址框位于页面底部的所有级别的三列
布局中。谷歌提供了一个很好的三篇专栏文章供我阅读，所以我想我会在其中一篇文章中找到一些东西。然而，总是欢迎指向最佳治疗的指示。
使用绝对定位的方法可能是执行
3列的最佳方法。页脚。使用浮动的方法可能具有必须重新排列内容顺序的
的缺点。如果你不需要
支持IE，那么CSS表是最好的。
我想在该页面的左上角放置一个徽标，
图像来自样式表。我设法用
http://www.sheltersrus.com.au 但是当我给它一个像top这样的位置时，我似乎无法重复定位它的技巧：10px;左：10px;事实上，鉴于CSS
错误，我无法看到我最初如何设置它。使用相同的代码（有或没有错误的
边界位）只是不起作用。有什么指针吗？
Works for me in IE, Opera, Gecko:
http://homepage.ntlworld.ie/spartanicus/trial1.html
What browser(s) are you using to test with?
However I found that using overflow: auto; in the main_box div seemed to
have the desired result of keeping everything in its boxes.
Doesn''t work in IE/win.
The revised html and css validated test page is at
http://www.architectqueensland.com/trial2.html
I still have several problems with it.
I''d like the blue address boxes at the bottom to be in a three column
layout all level across the bottom of the page. Google has provided a
nice list of three column articles for me to read, so I imagine I''ll
find something in one of them. However pointers to the best treatment
are always welcome.
A method using absolute positioning is probably the best way to do the
"3 column" footer. A method that uses floats likely has the drawback of
having to rearrange the order of the content. If you don''t need to
support IE then a CSS table is best.
I would like to put a logo in the top left corner of that page, with the
image coming via the stylesheet. I managed to do this with
http://www.sheltersrus.com.au but I can''t seem to repeat the trick of
positioning it when I give it a position like top: 10px; left: 10px; In
fact, I can''t see how I managed to position it originally, given the CSS
is wrong. Using the same code (with or without the wrong
borderposition bit) just doesn''t work. Any pointers on that?
你想把它放在标题中，还是放在标题下面？
-
Spartanicus
Do you want it placed in the header, or beneath it?
--
Spartanicus
这篇关于想要用流动的文本围绕图像框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
