Вставка изображения в конец блока

@Anderos · Регистрация: 28.09.2016

Студворк — интернет-сервис помощи студентам

Привет .
Есть сайт На сайте идет первый блок по подбору дисков по параметрам .

И есть картинка

Подскажите пожалуйста как данную картинку вставить с помощью css вот сюда

Код css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.box12 {position: relative;}
.filter-box {height: 221px; width: 274px; border: 1px solid #CCC; margin: 0px 17px 20px; padding: 7px; box-shadow: 0px 0px 26px 1px #ACACAC; display: inline-block; background: #E6E6E6;}
.filter-box h4:after, .filter-box h4:before {content: ''; position: absolute;}
.filter-box h4 {text-align: center; position: relative; color: white; margin: 0 -18px 10px -18px; padding: 7px 0; background: #9C9C9C; -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, .3); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); clear: both;}
.filter-box h4:before, .filter-box h4:after {border-style: solid; border-color: transparent; bottom: -10px;}
.filter-box h4:before {border-width: 0 10px 10px 0; border-right-color: #555; left: 0;}
.filter-box h4:after {border-width: 0 0 10px 10px; border-left-color: #555; right: 0;}
.filter-content {position: relative;}
.filter-content select {margin: 0px 0px  -10px;}
.box12 {
   
  
   border: 4px solid #c4d6dd;
    padding: 30px 5px;
    background: #fff;
    border-radius: 70;
    
}
.filter-content .button {float: right; margin: 3px 10px 0px 0px;}
.filter-content .three {margin: 0px 0px 8px;}
.filter-content .three > div {display: inline-block; margin: 0px 5px;}
.filter-content .three select {width: 79px; right:100px;}
.filter-content .two {margin: 0px 0px 8px;}
.filter-content .two > div {display: inline-block; margin: 0px 5px;}
.filter-content .two select {width: 125px;}
.filter-content .two-s {margin: 0px 0px 8px;}
.filter-content .two-s > div {display: inline-block; margin: 0px 5px;}
.filter-content .two-s .model {width: 150px;}
.filter-content .two-s .year {width: 80px;}
.filter-content .one {margin: 0px 0px 8px;}
.filter-content .one > div {display: inline-block; margin: 0px 5px;}
.filter-content .one select {width: 150px;}
.filter-content .disable {color: #A3A3A3; background: #CFCFCF; cursor: default;}
.filter-content .disable:hover {color: #A3A3A3; background: #CFCFCF;}
.filter-content.box-content select {width: 100%;}
.filter-content.box-content .button {float: none; margin: 10px auto 0px; display: block;}
.filter-content.box-content .auto {text-align: center;}
.filter-content.box-content .ajaxload {margin: 10px 0px 0px;}
.auto .ajaxload {margin-left: 30px; display: none;}
 
.htabs {border-bottom: none;}
.htabs > a{border-radius: 5px 5px 0px 0px; border: 1px solid #BBC1C7;}
.htabs > .selected {border-bottom: none; padding-bottom: 7px; background: white;}
.tabs-filter {border: 1px solid #BBC1C7; border-radius: 0px 5px 5px 5px; padding: 5px;}
.tabs-filter > a {position: absolute; bottom: 20px; left: 250px;}
.tabs-filter .button {float: none; position: absolute; top: 10px; left: 750px;}
.tabs-filter .two-s .year {width: 100px;}

@Getsok · 10.10.2016, 21:26

в классе <div class="tabs-filter"> создавать еще 1 div и прописывать через css подобные свойства

CSS
1
2
3
4
5
6
7
     border: medium none;
height: 50px;
position: fixed;
right: 20px;
top: 20px;
width: 50px;
z-index: 500

но мне кажется эта картинка будет лишней, вставь лучше лупу, будет более информативней/привычней.

@Anderos · 10.10.2016, 21:35 **[ТС]**

Getsok, а в div просто ссылку на изображение?и прописать к нему css? я правильно понял?

Добавлено через 2 минуты
Getsok, вроде такого

HTML5
1
<div><img class="image" src="mypic.png" alt="mypic"></div>

@Getsok · 10.10.2016, 21:47

Anderos, да, я сам так делал, работает) а что бутстрап не используете?
так удобней читать)

HTML5
1
2
3
<div class="image">
    <img src="img/mypic.png" alt="mypic">
</div>

@Anderos · 10.10.2016, 22:06 **[ТС]**

Getsok, Я не знаю что такое бутстрап ,по этому не могу вам ответить . Сейчас пытаюсь вывести картинку она встает почти в шапку но это я думаю в ксс правится ,и не отображается

Добавлено через 16 минут
Картинка встала но когда придаю ей свой класс вместо

HTML5
1
<div class="image">

на

HTML5
1
<div class="imagee">

, картинка улетает к шапке

@Getsok · 10.10.2016, 22:07

Поставьте на браузер Mozilla Firefox плагин Firebug с ним очень удобно дебажить страницы. Можно например css там править и сразу видеть результат. Для примера картинку выложил.
Посмотрите параметры соседних div блоков

@Anderos · 10.10.2016, 22:22 **[ТС]**

Getsok, поставлю , спасибо .

Добавлено через 12 минут
Getsok, Не подскажете как исправить? У меня не получается.

@Getsok · 10.10.2016, 23:10

Вот смотри, копирни блок div с классом one, смотри что на него наследуется и меняй параметры.

@Anderos · 10.10.2016, 23:23 **[ТС]**

Getsok, спасибо буду пробовать

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Getsok 14 / 14 / 2 Регистрация: 26.04.2015 Сообщений: 60
	10.10.2016, 22:07
	Поставьте на браузер Mozilla Firefox плагин Firebug с ним очень удобно дебажить страницы. Можно например css там править и сразу видеть результат. Для примера картинку выложил. Посмотрите параметры соседних div блоков Миниатюры 1

@Anderos 2 / 2 / 1 Регистрация: 28.09.2016 Сообщений: 98
	10.10.2016, 22:22 [ТС]
	Getsok, поставлю , спасибо . Добавлено через 12 минут Getsok, Не подскажете как исправить? У меня не получается. 0

@Getsok 14 / 14 / 2 Регистрация: 26.04.2015 Сообщений: 60
	10.10.2016, 23:10
	Вот смотри, копирни блок div с классом one, смотри что на него наследуется и меняй параметры. Миниатюры 1

@Anderos 2 / 2 / 1 Регистрация: 28.09.2016 Сообщений: 98
	10.10.2016, 23:23 [ТС]
	Getsok, спасибо буду пробовать 0