当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Achieving Absolute positioning without Position attribute, using Margin/Padding

问题描述:

I am working on building Email Based HTML. Now as we know, Position attribute is not well supported in Email clients so i will have to go on without that. Now, looking at my options... i can go for either Margin or padding to position the elements.

The input elements can be relatively positioned or absolute. I'll just take the absolute part for now. So, my input will be for example

One Parent DIV (top:0, left:0)

A Child DIV (top:20, left:20)

Second Child DIV (top:20, left: 200)

Now, in a normal browser based HTML, these elements would easily be placed on their appropriate positions. But without the position: absolute or even top, left attributes. It get's tricky as the margin attribute arranges the elements relative to the other elements. Here is a sample run:

<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">

<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>

<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>

<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>

</div>

Fiddle

My Expected outcome was, all the black divs overlapping each other, placed on the same position. That is possible if it calculates the margins according the the "Parent Element" but it is margining left from parent and top from the previous elements.

So My question now is, Is there a side way of using marging-left, top as top, left attributes and producing the same behavior as they would with position:absolute? Or simply, placing these three elements on top of each other using margin or padding attributes (No position, as it is not supported by Email clients)

I also know, using Divs for email isn't the best approach and i should consider using tables but trust me, the kind of HTML i am dealing with can only be generated using Divs and some playing around with margin or paddings. Any help will be appreciated.

网友答案:

You can use negative margins to achieve overlapping.

margin-top: -50pt

http://jsfiddle.net/pkdqh7kt/1/

Here is an example of stacking your divs horizontally:

http://jsfiddle.net/pkdqh7kt/2/

Also you can check this table to find out which CSS properties are currently supported by major email clients.

分享给朋友:
您可能感兴趣的文章:
随机阅读: