Использование встроенной таблицы стилей для изменения встроенных изображений - PullRequest
0 голосов
/ 19 июня 2011

У меня возникли некоторые проблемы при попытке создать нерегулярную линию обтекания изображения. По сути, мне дано 6 «кусочков» изображения, которые я собираю вместе, чтобы создать иллюзию, что это одно изображение; с аккуратно завернутым текстом слева от него.

Мне было поручено сделать это с помощью встроенной таблицы стилей. Я сделал обертку каждого «среза» внутри div (чтобы я мог установить ширину каждого среза), а затем обернул все эти div в div с id «images».

Теперь внутри у меня на голове есть следующий код:

<style type="text/css">
    #images {
        float: right;
        clear: right;
        margin: 0em 0em 0em 2em
    }
</style>

Теперь изображение собрано вместе, как и в промежутках между ними, но не все изображения смещаются вправо. На самом деле, похоже, что срезы выровнены по левому краю. Если бы они были выровнены по правому краю, это выглядело бы правильно.

Кроме того, книга просит применить стиль к «встроенным изображениям». Это легко сделать с абзацами, заголовками и адресами, но как бы я применил стиль к встроенным изображениям, кроме использования тонны div, как я только что сделал?

По запросу вот код для div изображений:

   <div id="images">
      <div style="width:6.7em"><img src="king1.gif" alt=""></div>
      <div style="width:7.85em"><img src="king2.gif" alt=""></div>
      <div style="width:11.45em"><img src="king3.gif" alt=""></div>
      <div style="width:14.25em"><img src="king4.gif" alt=""></div>
      <div style="width:15.5em"><img src="king5.gif" alt=""></div>
      <div style="width:16.6em"><img src="king6.gif" alt=""></div>
   </div>

Кроме того, я попробовал следующее безрезультатно:

img {
    float: right;
    clear: right;
    margin: 0 0 0 2em;
}

1 Ответ

0 голосов
/ 19 июня 2011

Зачем дополнительный div вокруг изображений?Просто используйте этот точный стиль на каждом изображении, см. http://jsfiddle.net/NGLN/B33kA/.

img {
    float: right;
    clear: right;
    margin: 0 0 0 2em;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...