мой класс float деактивирует мой класс ролловера

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Благодаря щедрой помощи кого-то из stackoverflow, я смог размещать CSS-блоки разного цвета поверх разных изображений и удалять css-блоки (открывая изображения) всякий раз, когда был наведен указатель мыши. это код, который я использовал fiddle http://jsfiddle.net/alexdickson/fyYcC /

Однако я также хотел, чтобы поля были выровнены по горизонтали в формате float, поэтому (будучи новичком) Я поместил другой класс (называемый float) вокруг изображений (в классе rollover), но он деактивировал ролловер.

Есть ли лучший способ реализовать float, чем я сделал ниже?

Заранее спасибо за вашу помощь

 <div class="float">
<div class="rollover a">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg"  />
</div>
</div>

<div class="float">
<div class="rollover b">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg"  />
</div>
</div>
<div class="float">
<div class="rollover c">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg"  />
</div>
</div>

.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}

проблемы с выравниванием

1. Я разветвил ваш код и внес некоторые изменения. Посмотрите, это то, что вы хотели.

2. @Не могу сказать, что я пробовал ваш код, но ролловеры деактивированы, см.. memeofmemes.com

3. @ Не могу сказать, ну, вы не увидите проблему сейчас, потому что я ввел новый код на сайте

4. Отличное название для этого поста. Предполагает некоторое глубокое аннулирование, возможно, с разбитым сердцем. Решил не повышать голос, но спасибо за подсказку.

Ответ №1:

Вы можете добавить float класс непосредственно к классу внутреннего div .

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

jsFiddle.

1. @Alex, спасибо за скрипку. На самом деле будет 4 строки с 3 изображениями в каждой строке, поэтому решение в вашей скрипке не будет работать для того, что я хочу (потому что ваше решение просто выровняло бы 12 изображений по горизонтали, я думаю) Вы знаете способ настроить его так, чтобы оно было 4 X 3? Кроме того, в чем недостаток «утечки деталей реализации CSS в HTML», если они уже видны в исходном коде страницы? Просто любопытно … это не может быть причиной безопасности, не так ли?

2. @Micheal Это не из соображений безопасности, просто вы должны дать им красивое семантическое имя, такое как info-box или что-то в этом роде, и оставить упоминание о float в CSS. Несколько размещенных элементов упадут под ними. jsFiddle .

3. @Alex спасибо за совет. Я многому учусь у вас здесь. Если вы посмотрите на результаты (www.memeofmemes.com ) вы увидите, что выравнивание CSS и изображения не совсем идеально… Вы знаете способ исправить это (ко дню матери)?

4. @Michael, на мой взгляд, выглядит идеально, какой браузер ты используешь?

5. @Alex Я проверил в Chrome, Firefox и Safari, все они выглядят как изображение в моей операционной системе. Какой браузер вы используете?

Ответ №2:

Я разветвил jsfiddle, который вы опубликовали, и смог переместить их влево с двумя рядами из 3 изображений. Вы можете просто добавить больше в каждый контейнер для большего количества горизонтальных изображений и добавить больше контейнеров, чтобы добавить больше строк. http://jsfiddle.net/robx/592ba/1 /