Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/18: Рейтинг темы: голосов - 18, средняя оценка - 4.50
kotya_player
1 / 1 / 0
Регистрация: 09.06.2016
Сообщений: 31
1

Не работает display:inline block

07.10.2016, 22:51. Просмотров 3272. Ответов 6
Метки нет (Все метки)

Дратути))0)
Такая проблема.Не могу понять в чем дело.По справаот картинки должнен быть текст.По чему-то не пашет display:inline block...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article class="post-list">
  <div class="post-list-item">
  <div class="post-list-item-image"></div>
<div class="post-list-item-text">
      <div class="post-list-item-head">
      <h2><a>WHAT IS LOVE ?</a></h2>
      <div class="infocont" ><span>September 21/2016</span></div>
      <div class="post-list-item-content">
       <p>
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...
       </p>
      </div>
      </div>
      </div>
      </div>
</article>
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
.post-list{
  float:left;
  position:relative;
  width:100%;
}
.post-list-item{
  width:100%;
  position:relative;
}
.post-list-item-head h2{
  font-size:14px;
}
.infocont{font-size:12px;}
.post-list-item-image{
    width: 250px;
    height:200px;
    display: inline-block;
    position: relative;
    background: center center no-repeat;
    background-size: cover;
    background-image: url('http://s011.***********/i316/1207/72/cdc05823f3c4.jpg');
}
.post-list-item-text{
  position:relative;
  display:inline-block;
  vertical-align: top;
    padding:0;
    margin:0;
}
Помогите плиз!
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.10.2016, 22:51
Ответы с готовыми решениями:

Не работает display:inline-block, не встает в ряд
Почему-то не работает display:inline-block,нет,он работает,но почему &quot;header__call' не встает рядом...

Меню через display:inline-block
Проблема заключается в том , что когда я масштабирую страницу у меня последняя ссылка прыгает вниз....

Float, display: inline-block почему?
Здравствуйте! Подскажите, пожалуйста, почему могут не работать float или display: inline-block?...

Боковые отступы у display:inline-block
Всем привет! Обратила внимание на то что рядом стоящие display:inline-block -ые элементы имеют...

Отступы между display:inline-block блоками
Здравствуйте. Нужно реализовать это: У меня почти получилось, вот только не могу убрать...

6
mrtoxas
Модератор
Эксперт HTML/CSS
3081 / 2182 / 1336
Регистрация: 12.07.2015
Сообщений: 5,832
Записей в блоге: 3
07.10.2016, 23:21 2
Потому что ширина параграфа 100%. Используйте или float, или задавайте блокам ширину.
1
kotya_player
1 / 1 / 0
Регистрация: 09.06.2016
Сообщений: 31
07.10.2016, 23:38  [ТС] 3
Всм у <p> ширина 100%?Мне нужно что бы блок с картинкой был 250px.А блок с текстом подстраивался...float не помогает...
0
mrtoxas
Модератор
Эксперт HTML/CSS
3081 / 2182 / 1336
Регистрация: 12.07.2015
Сообщений: 5,832
Записей в блоге: 3
07.10.2016, 23:54 4
Лучший ответ Сообщение было отмечено kotya_player как решение

Решение

Просто, у меня флоат круче
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.post-list-item-image {
  width: 250px;
  height: 200px;
  position: relative;
  background: center center no-repeat;
  background-size: cover;
  background-image: url([url]http://www.cyberforum.ru/images/cyberforum_logo.png);[/url]
  float:left;
}
 
.post-list-item-text {
  position: relative;
  vertical-align: top;
  padding: 0;
  margin: 0;
}
Результат

Добавлено через 2 минуты
Цитата Сообщение от kotya_player Посмотреть сообщение
Всм у <p> ширина 100%?
<p> - блочный элемент и занимает 100% ширины. И он растягивает своего родителя, если у родителя не задана ширина.
1
kotya_player
1 / 1 / 0
Регистрация: 09.06.2016
Сообщений: 31
08.10.2016, 00:04  [ТС] 5
Цитата Сообщение от mrtoxas Посмотреть сообщение
Просто, у меня флоат круче
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.post-list-item-image {
  width: 250px;
  height: 200px;
  position: relative;
  background: center center no-repeat;
  background-size: cover;
  background-image: url([url]http://www.cyberforum.ru/images/cyberforum_logo.png);[/url]
  float:left;
}
 
.post-list-item-text {
  position: relative;
  vertical-align: top;
  padding: 0;
  margin: 0;
}
Результат

Добавлено через 2 минуты

<p> - блочный элемент и занимает 100% ширины. И он растягивает своего родителя, если у родителя не задана ширина.
Хм,понятно с этим.Теперь еще проблемма - отступ текстовой части от картинки теперь как сделать?

Добавлено через 2 минуты

Впринципе,можно сделать отступ,который равен ширине картинки + само значение отступа.Это можно,но почему просто отступ не работет?
0
mrtoxas
Модератор
Эксперт HTML/CSS
3081 / 2182 / 1336
Регистрация: 12.07.2015
Сообщений: 5,832
Записей в блоге: 3
08.10.2016, 00:04 6
Цитата Сообщение от kotya_player Посмотреть сообщение
отступ текстовой части от картинки теперь как сделать?
CSS
1
2
3
.post-list-item-text {
  margin-left:260px;
}
1
kotya_player
1 / 1 / 0
Регистрация: 09.06.2016
Сообщений: 31
08.10.2016, 00:18  [ТС] 7
Спасибо,друг,реально,очень выручил!Я уже не надеялся))
0
08.10.2016, 00:18
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.10.2016, 00:18

Кроссбраузерность display: inline-block - mozilla / chrome
Уважаемые форумчане! Неожиданно столкнулся с проблемой кроссбраузерности... в двух местах своего...

Промежутки между элементами со свойством display: inline-block
Прошу прощения. Вопрос ещё не доделан, редактирую. html: &lt;div id=&quot;content&quot;&gt; ...

Ссылка на всю область слоя со свойством display: inline-block;
Всем привет! Вот в этой статье изложено, как можно сделать ссылку на всю область блока:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.