#html #css #layout
#HTML #css #макет
Вопрос:
У меня досадная проблема, если кому-то нужна дополнительная информация, пожалуйста, скажите, поскольку я не уверен, что я должен поместить здесь, чтобы прояснить вопрос! На первом рисунке у меня текущий макет, я хотел переместить звездные рейтинги ниже изображений в пунктирном div других пользователей.
Но когда я это делаю, все становится нечетким, как вы можете видеть на втором рисунке. Кто-нибудь знает, на что я должен обратить внимание, чтобы убедиться, что звезды заканчиваются под div с изображениями изображений hte. Я поместил свой css внизу.
#gallery { margin-left:auto;
margin-right:auto; background:#EEE; float: left; border: width: 500px; solid 1px #BBBBBB ; border-style: dashed; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; height:86px padding: 0.4em; margin: 0.4em 0.4em 0.4em 0.4em; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
Комментарии:
1. пожалуйста, покажите нам свой HTML
2. вы можете сбросить его здесь или опубликовать в чем-то вроде jsfiddle.net
3. Добавлено здесь pastebin.com/LLt172qa
4. Я хочу, чтобы сетка была над и за пределами div с серым фоном и пунктирной границей.
Ответ №1:
Вы закрыли часть тега, прежде чем присвоить ему атрибут style, как показано ниже:
<li class='current-rating'> style='width:105px;' Currently 3.5/5 Stars.</li>
Должно быть:
<li class='current-rating' style='width:105px;'> Currently 3.5/5 Stars.</li>
Забыл закрыть <h4> тег:
<h4>Megan Fox was recommended because the following people also liked it
<ol id='gallery' class='gallery ui-helper-reset ui-helper-clearfix'>
...
Который должен быть:
<h4>Megan Fox was recommended because the following people also liked it</h4>
<ol id='gallery' class='gallery ui-helper-reset ui-helper-clearfix'>
...
border: width: 500px; solid 1px #BBBBBB ;
Должно быть:
width: 500px;
border: 1px solid #BBBBBB;
height:86px padding: 0.4em; margin: 0.4em 0.4em 0.4em 0.4em;
Должно быть:
height:86px; padding: 0.4em; margin: 0.4em 0.4em 0.4em 0.4em;
Кроме того, в настоящее время у вас есть <p id='initial p'>
Обратите внимание, что у вас может быть только один уникальный идентификатор на любой странице для допустимого HTML, а атрибуты id не могут принимать более одного идентификатора (как вы пытались сделать выше, что видно по интервалу).
В CSS на идентификаторы ссылается # символ, а не . .
Это то, чего вы хотели? http://fiddle.jshell.net/Shaz/Kwpj4/9 /
Комментарии:
1. да, на самом деле я тоже это заметил, но не был уверен, была ли это просто ошибка вставки или нет.
2. Спасибо, извините, что в данный момент я копипастер с css / html. Я обновил страницу fiddle, так как хотел, чтобы рейтинги отображались над div. Однако я все еще сталкиваюсь с той же проблемой, когда внутри div появляются звездочки, которые также накладываются на содержимое (очень похоже на картинку выше)
3. О, извините, я тоже заметил, я не вставил родительский div. Кажется, это работает в jsfiddle (что довольно круто). Я еще немного поиграю
4. @steve: Взгляните на новую ссылку в ответе, также попытался исправить некоторые из ваших проблем с css. 🙂