CSS позиционирующие элементы - PullRequest
Новая
       7

CSS позиционирующие элементы

0 голосов
/ 26 марта 2012

Я создаю мобильное веб-приложение с помощью jquery mobile. Теперь что у меня есть. У меня есть складной элемент, который вы можете увидеть на этой ссылке . Теперь для каждой записи, которую я получу из базы данных, она создаст новый разборный элемент. Вот мой код для складного элемента. 

<div data-role="collapsible">
            <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
                <div id="buttons">
                    <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~</a>
                    <img style="position:absolute;top:290px;right:45px;" src="images/mailIcon.png" width=32 height=32 />
                    <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~</a>
                    <img style="position:absolute;top:360px;right:45px;" src="images/phoneIcon.png" width=32 height=32 />

                </div>
            </div>

У меня 2 изображения: значок телефона и значок почты. Как и в случае с позицией выше, они находятся только на первых двух кнопках в моем первом разборном элементе. Но что мне нужно сделать, чтобы эти кнопки также появлялись на моих следующих кнопках?

Итак, мой вопрос, как я могу расположить эти 2 кнопки в div с ID = "buttons".

- EDIT-- Вот ссылка на фактическую страницу.

С уважением,

Stef

Ответы [ 2 ]

0 голосов
/ 26 марта 2012

Как я и подозревал, виновником является абсолютное расположение иконок. Вы позиционируете две иконки, используя position:absolute и верхнее смещение, но вокруг него нет элемента с position:relative. Это означает, что начальная точка позиционирования возвращается к началу страницы.

Другими словами, ваш второй (и третий, четвертый и т. Д., Если у вас больше результатов) набор значков есть, но они расположены в том же месте, что и первые два значка: ровно в 290 пикселей и 360 пикселей сверху страницы.

Вместо этого поместите img со значком внутри элемента <a>, который является каждым элементом, и расположите его относительно окружения. Это будет работать, вероятно: 

<div data-role="collapsible">
   <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
       <div id="buttons">
          <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~
              <img style="float:right;margin:5px 15px" src="images/mailIcon.png" width=32 height=32 />
          </a>

          <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~
              <img style="float:right;margin:5px 15px" src="images/phoneIcon.png" width=32 height=32 />

          </a>
            </div>
        </div>
0 голосов
/ 26 марта 2012

Вам необходимо присвоить position:relative для дивизий buttons, затем изменить первую позицию img на top:15px, а второй img (значок телефона) сказать top:75px или что-то подходящее.

Таким образом, вы поместите каждый элемент img относительно того, в котором он содержит buttons div. В вашем примере все изображения складываются, потому что они absolute расположены относительно окна.

...