Как разместить изображение по сравнению с текстом

tldr; Как позиционировать картинку, чтобы она перемещалась пропорционально перемещению текста при изменении размера окна.Как разместить изображение по сравнению с текстом

В моем примере здесь я использовал абсурдное положение, чтобы он выглядел хорошо в 1920x1080. Я хотел бы, чтобы он следовал тексту, когда я изменяю размер окна.

Перейдите на сайт nordicreservation.com и измените его размер по оси x, чтобы увидеть, что я имею в виду, если вы не понимаете мой вопрос.

Принесите любую помощь, которую я смогу получить здесь, поскольку я довольно новичок в этом и просто пытаюсь создать сайт для своего отца.

</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>

источник

2016-03-11 Ragatokk

Так скажите нам: что _exactly_ вы подразумеваете под «следовать тексту при изменении размера окна»? – arkascha

Ваш пример - nordicreservation.com - кажется, не решить. Возможно, вы могли бы сделать вопрос более ясным, показав несколько скриншотов того, что вы пытаетесь достичь? –

Не уверен, что это то, что вы делаете после или нет, но с сайта, на котором вы упоминаете, вы можете попробовать разместить 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>

источник

2016-03-11 19:31:42 Quantumplate

Это сработает, если я смогу сделать это немного правее текста, а не наоборот в правой части экрана. – Ragatokk

Попробуйте поместить 'float: left' в' img' вместо 'float: right' (что поставит его ближе к списку). Затем вы можете добавить «margin-left: 20px' в стиль img для более точного контроля разрыва. – Quantumplate

Это очень близко к тому, как я этого хотел, просто хотел бы немного разобраться. Спасибо :) – Ragatokk

Используйте процент для этого, как: margin-left: 80%;

Это отрегулировать в любом размере экрана.

источник

2016-03-11 19:03:17

Я все это пробовал, и картинка движется с меньшей скоростью, чем текст. Обновленный веб-сайт до 80%, если вы хотите взглянуть. – Ragatokk

Использование 'position: absolute;' вам не поможет! Попробуйте удалить этот встроенный CSS из образа и создать для него класс в CSS. Примеры: '.image-content {margin-left: 80%;}' и в теге img используйте ''. Вы можете начать редактирование. :) –

Выполнение: позиция: относительная; TOP: 116px; LEFT: 80%; Я получаю ось x, чтобы быть, как я хотел, но, к сожалению, теперь нет, где я хочу, чтобы она была на оси y. – Ragatokk

Как разместить изображение по сравнению с текстом

ответ

Смежные вопросы