- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Проблема с блоком, он по ширине растягивается !
Как сделать что бы он не растягивался !
Просто сжимался если что то есть в блоке, допустим фото или текст.
css
.blocklok{
padding-bottom: 10px;
padding-top: 10px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 15px;
margin-top: 20px;
width: 100%;
border: 1px solid #F16499;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Стиль css, для вывода фото:
.imgosya {
float: left;
width: 250px;
height: 250px;
overflow: hidden;
margin-left: 9px;
margin-top: 9px;
border: 1px solid #FFDDEF;
}
.imgosya img{
left: 50%;
top: 50%;
max-width: 250px;
max-height: 250px;
}
html
<div class="blocklok">
<h1><strong>Фотографии</strong></h1>
<div class="imgosya"><a href="---"><img src="910817697.jpg" alt=""/></a></div>
<div class="imgosya"><a href="---"><img src="910817697.jpg" alt=""/></a></div>
<div class="imgosya"><a href="---"><img src="910817697.jpg" alt=""/></a></div>
<div class="imgosya"><a href="---"><img src="910817697.jpg" alt=""/></a></div>
</div>
<div style="clear:both"></div>
</div>
Выглядит это так:
Если убрать, <div style="clear:both"></div>, то блок нормально выглядит все поджато так как там пусто в блоке !!!
Но если добавить фото и без <div style="clear:both"></div>, то фото будут вылазить за блок, скрин два ! вид..
<div style="clear:both"></div> - выходит что оптекание растягивает поле !
но если его убрать, то фото будут вылазить за блок.
А если убрать, <div style="clear:both"></div>
Выглядит так:
А если просто без фото, то рамка так выглядит:
Видно что растянута, это все из за стиля.
Если кто меня понял, то блок сам по себе если он пустой не должен растягиваться !
Помогите навести красоту :)
1)Убери <div style="clear:both"></div> из разметки
2) Все элементы .imgosya оберни в <div> и к нему добавь класс clearfix
Сам класс clearfix:
.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}
1)Убери <div style="clear:both"></div> из разметки
2) Все элементы .imgosya оберни в <div> и к нему добавь класс clearfix
Сам класс clearfix:
.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}
там нельзя так, нужно что бы фотка оборачивалась в див ! там фотки идут по левую сторону, как бы фотка за фоткой.
я ставил калсс этот и все равно ничего не изменилось !
там так сделано это видно по css, почему фотка в отдельный див идет, там вывод он уменьшает фото и делает что бы оно не искаженное было, а ровное !
Вообще м нужно что бы блок не растягивался, а растягивался под фото ! под последнию что бы не было лишних пробелов ! по скринам все видно и понятно.
---------- Добавлено 28.03.2014 в 22:57 ----------
Забыл добавить, все фото входят в класс
#ankfotofullall{
width:850px;
margin-left: 1px;
margin-top: 1px;
}
это для того что бы фото не в ряд были и за блок уходили в правую сторону, а что бы в строку три фото было и если фото больше чем три, то фотка 4 переходит на вторую строку.
Overflow:hidden;
Классу родителю.
Overflow:hidden;
Классу родителю.
О чудо, оно свершилось :), повелитель css помог решить проблему, большое спасибо.
Вопрос ( работает во всех брайзера? планшетах и телефонах ? ) Overflow:hidden;
там нельзя так, нужно что бы фотка оборачивалась в див ! там фотки идут по левую сторону, как бы фотка за фоткой.
я ставил калсс этот и все равно ничего не изменилось !
там так сделано это видно по css, почему фотка в отдельный див идет, там вывод он уменьшает фото и делает что бы оно не искаженное было, а ровное !
Вообще м нужно что бы блок не растягивался, а растягивался под фото ! под последнию что бы не было лишних пробелов ! по скринам все видно и понятно.
---------- Добавлено 28.03.2014 в 22:57 ----------
Забыл добавить, все фото входят в класс
Вы меня просто неправильно поняли - моя вина. Это работало бы, могу сверстать.
О чудо, оно свершилось :), повелитель css помог решить проблему, большое спасибо.
Вопрос ( работает во всех брайзера? планшетах и телефонах ? ) Overflow:hidden;
Ответ: http://htmlbook.ru/css/overflow