右对齐浮点数和内容线性度 [英] Right aligned floats and content linearity

问题描述

段落旁边的右对齐浮动需要放在源代码中的

段落之前，这会导致内容顺序与

相反听觉领域。


任何人都知道这个问题的解决方案吗？

无头


-

电子邮件和usenet过滤列表： http：//www.headless .dna.ie / usenet.htm

解决方案

Headless写道：

|在段落旁边的右对齐浮点需要放在

|之前在源代码中的段落，这导致内容顺序在

|中相反视觉和听觉领域。

|有人知道这个问题的解决方案吗？


无头，我脑海中出现的前三个解决方案是：


- 浮动段落向左而不是div向右

- 浮动它们两个，一个向左，另一个向右

- 使用绝对定位


HTH，

SantaKlauss

SantaKlauss写道：

|在段落旁边的右对齐浮点需要放在
|之前在源代码段中，这导致内容顺序在
|中相反视觉和听觉领域。
|任何人都知道这个问题的解决方案吗？

无头，我脑海中出现的前三个解决方案是：

- 将段落向左移动而不是div到对吧


不行。 （该段将占据全宽）

- 将它们两个浮动，一个向左，另一个向右浮动


不行。 （见上文）

- 使用绝对定位

不行。 （绝对定位元素从流程中移除）

无头


-

电子邮件和usenet过滤列表： http://www.headless.dna.ie/usenet.htm

无头问道，SantaKlauss回答，Headless回答：


| > |在段落旁边的右对齐浮点需要放在

|之前> |在源代码中的段落，这导致内容顺序在

|中相反> |视觉和听觉领域。

| > |有人知道这个问题的解决方案吗？

| > Hi Headless，我想到的前三个解决方案是：

| > - 将段落向左移动，而不是将div向右浮动


|不行。 （该款占据全宽）


是的，这是真的。


| > - 将它们两个浮动，一个向左，另一个向右浮动


|不行。 （见上文）


我已经研究过这个解决方案了，

指定两个元素的宽度就足够了：


p #content {

float：left;

宽度：70％;

}


div＃sidenote {

float：right;

宽度：29％;

border：1px solid＃ 000

}


出于一个奇怪的原因，如果

百分比的总和是，则Opera 7.1不会浮动旁注100％，所以我增加了99％。


| > - 使用绝对定位

|不行。 （绝对定位的元素从流程中删除）


我认为它会起作用。尝试将两个元素放在相对定位的容器上

以允许绝对定位。例如：


< div style =" position：relative">

< p style =" position：absolute;顶部：0;左：0;宽度：80％>>

<！ - 这里的段落内容 - >

< / p>

< ; div style =" top：0;右：0;宽度：20％>>

<！ - 这里的旁注内容 - >

< / div>

< ; / div>


查看有关定位的教程 www.brainjar.com

并记住IE将考虑填充作为宽度的一部分，

而其他浏览器，正确地，不要''吨。你可以在这里找到Tantek的

Box模型黑客：
http://tantek.com/CSS/Examples/boxmodelhack.html

HTH，

SantaKlauss

A right aligned float next to a paragraph needs to be placed before the
paragraph in the source, this causes the content order to be opposite in
the visual and aural domain.

Anyone know of a solution to that problem?
Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

解决方案

Headless wrote:
| A right aligned float next to a paragraph needs to be placed before the
| paragraph in the source, this causes the content order to be opposite in
| the visual and aural domain.
| Anyone know of a solution to that problem?

Hi Headless, the first three solutions that come in my mind are:

- float the paragraph to left instead the div to the right
- float them both, one to left and the other to right
- use absolute positioning

HTH,
SantaKlauss

SantaKlauss wrote:

| A right aligned float next to a paragraph needs to be placed before the
| paragraph in the source, this causes the content order to be opposite in
| the visual and aural domain.
| Anyone know of a solution to that problem?

Hi Headless, the first three solutions that come in my mind are:

- float the paragraph to left instead the div to the right
Won''t work. (the paragraph will occupy the full width)
- float them both, one to left and the other to right
Won''t work. (see above)
- use absolute positioning

Won''t work. (absolutely positioned elements are removed from the flow)
Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

Headless asked, SantaKlauss answered and Headless replied:

| >| A right aligned float next to a paragraph needs to be placed before the
| >| paragraph in the source, this causes the content order to be opposite in
| >| the visual and aural domain.
| >| Anyone know of a solution to that problem?
| >Hi Headless, the first three solutions that come in my mind are:
| >- float the paragraph to left instead the div to the right

| Won''t work. (the paragraph will occupy the full width)

Yes, it''s true.

| >- float them both, one to left and the other to right

| Won''t work. (see above)

I'' ve worked on this solution, and it will be sufficient to
specify the width of the two elements:

p#content{
float: left;
width: 70%;
}

div#sidenote{
float: right;
width: 29%;
border: 1px solid #000
}

For a strange reason, Opera 7.1 won''t float the sidenote if the sum of
percentages is 100%, so I put on 99%.

| >- use absolute positioning
| Won''t work. (absolutely positioned elements are removed from the flow)

I think it will work. Try to put the two elements on a relative positioned container
to allow absolute positioning in it. For example:

<div style="position: relative">
<p style="position:absolute; top:0; left:0; width:80%">
<!-- paragraph content here -->
</p>
<div style="top:0; right:0; width:20%">
<!--sidenote content here-->
</div>
</div>

Have a look on the tutorial on positioning on www.brainjar.com
and keep in mind that IE will consider padding as part of the width,
while other browsers, correctly, don''t. You could find Tantek''s
Box Model hack here:
http://tantek.com/CSS/Examples/boxmodelhack.html

HTH,
SantaKlauss

这篇关于右对齐浮点数和内容线性度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！