CSS: таблицы или?

Question

[CSSwaR]

Доброго дня.
Являюсь новичком в борьбе с CSS :)
Много читаю, много читал.
Пользую бутстрап сейчас и верстаю сайт себе.
Тут встал вопрос.
Как сверстать это?

Меню меня не интересует, там есть слайдер еще, его я тут не обозначал.
Просто нужно ровненько вставить картинки+ссылка подробнее под ними...
Таблицы нужно делать? Или есть другой способ? Или же просто текст<img src=""><a href="">Текст</a>И CSS?
Как правильнее сделать? Подскажите кому не трудно. Буду очень признателен.
Спасибо.

Answer 1

[Azat S.]

Там есть адаптивная grid сетка:
getbootstrap.com/css/#grid

Comments

[CSSwaR]

Сеткой я пользуюсь с этим проблем не возникает. Все адаптивно. Все прекрасно.
Но вопрос по картинкам. С текстом.)))) Казалось бы, что может быть проще..Ставишь Я левое меню

Подробнее
..."Это чтобы понятнее было, а так написано в CSS

Я же не совсем дурачок)
Просто нужно выравнять кнопку подробнее. Чтобы была не справа, а под картинкой. Вот в чем и вопрос. Знаю что такое margin и padding и эти отступы задать сам могу)))

[Azat S.]

Так?

button {
display: block;
margin: 20px auto;
}

[CSSwaR]

Весьма быть может. Сейчас глянем.
Это при условии что у нас подробнее - кнопка.

[Azat S.]

CSSwaR: если не получится, то залейте всё на Codepen или, если у вас всё это в сети где-то лежит, то дайте ссылку.

[CSSwaR]

Получилось, только теперь картинки не в ряд, а одна под другой. Интересно, спасет ли положение для дива display:inline

[Azat S.]

CSSwaR: Картинки тоже выравниваем по центру и делаем их размер адаптивным к размерам экрана:

.yourclass img {
max-width: 100%;
height: auto;
display: block;
}

[CSSwaR]

не. Вообщем задал float:left для Встало все. Спасибо. Пойду дальше ковыряться.

Answer 2

[Дмитрий Новиков]

Начните все-таки не с бутстрапа, а с основ CSS и HTML. не боритесь с ним, а изучайте. почитайте про ширину, отступы, чем отличается padding от margin, чем отличаются блочные элементы от строчных и почему между последними иногда возникают пробелы, а иногда нет. и тогда вопросов типа "как сверстать ровно 3 элемента" не возникнет.

Comments

[CSSwaR]

Быть может посоветуете тогда литературу или сайт?

[CSSwaR]

Сеткой я пользуюсь с этим проблем не возникает. Все адаптивно. Все прекрасно.
Но вопрос по картинкам. С текстом.)))) Казалось бы, что может быть проще..Ставишь

<div class="container"><div class="row"><div class="col-md-8">Я левое меню</div>
  <div class="col-md-4"><p class="one-pict">
	<img src="images/1.png"  width="120" height="120"><a href="#">Подробнее</a>
   <img src="images/1.png" width="120" height="120">   ..."Это чтобы понятнее было, а так написано в CSS
   <img src="images/1.png" width="120" height="120">
   <img src="images/1.png"  width="120" height="120">
  </p></div></div></div>

Я же не совсем дурачок)
Просто нужно выравнять кнопку подробнее. Чтобы была не справа, а под картинкой. Вот в чем и вопрос. Знаю что такое margin и padding и эти отступы задать сам могу)))

Answer 3

[sergey]

Что собственно мешает Вам это сделать на Bootstrap

Comments

[CSSwaR]

Мне мешает отсутствие знания как бы выравнять текст с ссылкой под картинку)

Answer 4

[Игорь Катков]

Возьмите картинку и текст и оберните их в отдельный div. А там уже стилизируйте как душе угодно