问题描述:

I am trying to do a design in css, the whole idea is to place four different images on different corners of image (I did that already using absolute position), but the question is that when I make it responsive its all out of position.

What I have done is here, hope somebody can help.

html

<div class="map_image" style="border:1px solid red;">

<img title="" src="crvnx.png" />

<img class="map_link" id="map_link_0" title="" src="" />

<img class="map_link" id="map_link_1" title="" src="newuploads/n8cpt.png" />

<img class="map_link" id="map_link_2" title="" src="" />

<img class="map_link" id="map_link_3" title="" src="" />

</div>

Regards

网友答案:

You can check below code.. may be this help you..

<div style="width: 100%px; height: 100%; background: #ccc; position: relative; min-width: 320px;
    min-height: 300px;">
    <div style="height: 100px; width: 100px; background: #000; position: absolute; top: 0;
        left: 0;">
    </div>
    <div style="height: 100px; width: 100px; background: #000; position: absolute; top: 0;
        right: 0;">
    </div>
    <div style="height: 100px; width: 100px; background: #000; position: absolute; bottom: 0;
        left: 0;">
    </div>
    <div style="height: 100px; width: 100px; background: #000; position: absolute; bottom: 0;
        right: 0;">
    </div>
</div>

Link

Good luck...

相关阅读:
Top