如何相对于文本定位图像

时间:2016-03-11 18:44:11

标签: css

tldr;如何定位图片,使其在调整窗口大小时与文本移动相反。

在我的例子中,我使用absoulute位置使其在1920x1080看起来很好我希望它在我调整窗口大小时遵循文本。

转到nordicreservation.com并在x轴上调整大小,看看我的意思,如果你不理解我的问题。

Apriciate我可以得到任何帮助,因为我对此很陌生,只是想为我父亲创建一个网站。

</head>
<body>
<div class="container">
  <div class="content">
    <h1 style="color: #06068E;">HJEMMEDATAHJELPEN</h1>
    <p>Hjemmedatahjelpen sikter seg inn på å komme hjem til folk i Nittedal og bistå med teknisk assistanse.
    <img src="myimmage.jpg" alt="Bilde"" width="143" height="200" style="position: absolute; TOP: 116px; LEFT: 1120px;" longdesc="http://www.hjemmedatahjelpen.no/Johannes" >
  </div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

使用百分比,例如: margin-left: 80%;

可在任何尺寸的屏幕中进行调整。

答案 1 :(得分:0)

不确定这是否是您所追求的,但是从您提到的网站上,您可以尝试在列表中放置一个div,将图像放在div中,向左浮动列表并向右图像并放置一个明确的div底部。像这样......

<div>
  <ol type="1" style="float:left;font-size:14px;">
    <li> Rydde i PC´en for å få den til å gå raskere. </li>
    <li> Lage enkle bruksanvisninger på å gjøre ting </li>
    <li> Lage enkle oppsett som gjør ting enklere som snarveier og annet. </li>
    <li> Hjelpe med å konfigurere mobilen. </li>
    <li> Oppsett av e-post, Internett oa. </li>
    <li> Støtte til iPad, iMac og iPhone oa. </li>
    <li> Støtte til Windows, Word, Excel oa. </li>
    <li> Hvordan enkelt redigere video, organisere bilder oa. </li> 
  </ol>
  <img src="johannes.jpg" alt="Bilde" width="143" height="200" style="float:right;" longdesc="http://www.hjemmedatahjelpen.no/Johannes" />
  <div style="clear:both;"></div>                                                                                                                                                
</div>