不规则形状列中的文本和图像 [英] Text and images in irregular shaped column(s)
问题描述
我希望以不规则方式传输文本。左边的一列，并在不规则的顶部放置一个
的大图像。列向右。然后在
后面的大图像的底部我想要左边的文本列
向右扩展部分，但不是一直向右扩展，如我想要
a右边的小图片。然后这将继续到页面底部
。文本需要在左列中向下流动。并且正确的
边缘的照片需要排在页面的右边缘。
txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt | img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt | img |
txttxttxtxt ----
txttxttxtxt
我之前尝试过嵌套表格格式但无法实现
文本块右边缘与图像左边缘的一致间距
边缘。我也无法在图像之间实现一致的垂直间距
。
我还原为将文本和图像整合在一起的页面
单表列< td>并且图像对齐并且具有
vspace / hspace属性（HTML在下面）。然而，当文本和/或字体太多时，文本在
下方流向右边距
大小增加。 （这是预期的，但我希望避免）。
这个特殊的布局是一个浮动的候选人吗？类似于MP周二发布的
情况？我将在w3.org做一些研究，但任何
指针都会受到赞赏。 BTW这个项目还没有在公共服务器上
所以还没有可用的URL。
< td class =" override" align =" top">
< img hspace =" 15" VSPACE =" 15"对齐= QUOT;右" src =" images / bigphoto.jpg">
BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah。
< br />
< br />
< a href =" /images/image-popup2.jpg"标题= QUOT;等等" alt =" blah">
< img hspace =" 15" VSPACE =" 5英寸对齐= QUOT;右" src =" images / small-
image2.jpg" />< / a>
BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah。
< br />
< br />
< a href =" /images/image-popup3.jpg"标题= QUOT;等等" alt =" blah">
< img hspace =" 15" VSPACE =" 5英寸对齐= QUOT;右" src =" images / small-
image3.jpg" />< / a>
BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah。
< br />
< br />
< / td>
谢谢，
Woodmon
I want to flow text in an "irregular" column on the left and place a
large image at the top of an "irregular" column to the right. Then after
the bottom of the large image I want the text column on the left to
expand part way to the right, but not all the way to the right, as I want
a smaller image on the right. Then this will continue to the bottom of
the page. The text needs to flow down in the left column. And the right
edge of the photos need to line up on the right edge of the page.
txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
I previously attempted a nested table format but could not achieve
consistent spacing between the right edge of the text block and the left
edge of the images. Nor could I achieve consistent vertical spacing
bwtween the images.
I reverted to formatting the page with the text and images all in one
single table column <td> and with the images aligned right and with
vspace/hspace attributes (HTML is below). However the text flows beneath
the images to the right margin when there is too much text and/or font
size is increased. (this was expected but I wish to avoid).
Is this particualr layout a candiate for a "float" similar to MP''s
situation posted on Tuesday? I will do some research at w3.org but any
pointers are appreciated. BTW this project is not yet on a public server
so no URL yet available.
<td class="override" align="top">
<img hspace="15" vspace="15" align="right" src="images/bigphoto.jpg">
BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
<br />
<br />
<a href="/images/image-popup2.jpg" title="blah" alt="blah">
<img hspace="15" vspace="5" align="right" src="images/small-
image2.jpg" /></a>
BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
<br />
<br />
<a href="/images/image-popup3.jpg" title="blah" alt="blah">
<img hspace="15" vspace="5" align="right" src="images/small-
image3.jpg" /></a>
BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
<br />
<br />
</td>
Thanks,
Woodmon
推荐答案
Woodmon < mr.mediamonATgmail.com>写在
新闻：Wt ******************** @ comcast.com：
Woodmon <mr.mediamonATgmail.com> wrote in
news:Wt********************@comcast.com:
< td class =" override" align =" top">
<td class="override" align="top">
糟糕。 s应该是''valign''在上面。
W3C上的W3C表格建议显示''colgroup''和''col''
元素。这可能是解决方案的一部分吗？
下面是我正在尝试做的更好的图片。
T0 =流动的文本段落。
X1 =超宽图像。
X2 - X5 =单个图像（每个图像比较窄）。
--- -----------------
| T0 | X1 | X1 |
--------------------
| T0 | T0 | X2 |
--------------------
| T0 | T0 | X3 |
--------------------
| T0 | T0 | X4 |
--------------------
| T0 | T0 | X5 |
--------------------
我希望这是可以理解的。我可以做基本的表，但当它变得更复杂时，我只会头疼。或者这应该在CSS中设置？
这是一次性的交易，所以我不这么认为。
Woodmon
Oops. sSould be ''valign'' above.
W3C Recommendations on Tables at w3.org shows ''colgroup'' and ''col''
elements. Could this be part of solution?
Below is a better picture of what I''m attempting to do.
T0 = the flowing paragraphs of text.
X1 = extra wide image.
X2 - X5 = individual images (each narrower thant X1) .
--------------------
| T0 | X1 | X1 |
--------------------
| T0 | T0 | X2 |
--------------------
| T0 | T0 | X3 |
--------------------
| T0 | T0 | X4 |
--------------------
| T0 | T0 | X5 |
--------------------
I hope this is comprehensible. I can do basic tables but when it becomes
more complex I only achieve a headache. Or should this be setup in CSS?
This is a one shot deal so I didn''t think so.
Woodmon
2005年10月21日星期五16:45:03 +0200，Woodmon< mr.mediamonATgmail.com>写道：
On Fri, 21 Oct 2005 16:45:03 +0200, Woodmon <mr.mediamonATgmail.com> wrote:
txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt | img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt | img |
txttxttxtxt ----
txttxttxtxt
txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
< URL：http ：//home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>
查看标记和样式的来源。
-
， - - < - @ - PretLetters：''woest wyf''，遇见vele interesses：--------- - 。
|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |
| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |
| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |
` --------------------------- ----------------------- - < - @ ------------''
<URL:http://home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>
Look at the source for markup and styles.
--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''
Woodmon写道：
Woodmon wrote:
我想以不规则方式流动文本。左边的一列，并在不规则的顶部放置一个大图像。列向右。然后在大图像的底部之后我想要左边的文本列向右边展开，但不是一直向右展开，因为我想要更小图片在右边。然后这将继续到页面的底部。文本需要在左列中向下流动。照片的正确边缘需要排在页面的右边缘。
I want to flow text in an "irregular" column on the left and place a
large image at the top of an "irregular" column to the right. Then after
the bottom of the large image I want the text column on the left to
expand part way to the right, but not all the way to the right, as I want
a smaller image on the right. Then this will continue to the bottom of
the page. The text needs to flow down in the left column. And the right
edge of the photos need to line up on the right edge of the page.
http://www.meyerweb.com/eric/css/edg...loat/demo.html
....不完全是你想要的，但知识应该有所帮助。
http://www.meyerweb.com/eric/css/edg...loat/demo.html
.... not exactly what you want, but the knowledge should help.
这篇关于不规则形状列中的文本和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
