Помогите с DIVами и CSS

348

svv

16 февраля 2016, 08:33

594

Новостной сайт. Сделали удобный вывод блоков новостей, при которых на главную выводятся заголовки, причем чем шире экран, тем больше влезает в строку. Но бесят пустые пространства справа и слева. Как сделать так, чтобы ширина блоков была не 330px, а ОТ 330px до полной ширины заполнения?

Сейчас шаблон такой:

<html>

<head>

<title>Главная новостей города</title>

<style>

.td{border: 3px solid #000;}

.tb{display:inline-block; width:330px !important; background: #f1f1f1; border: 1px}

.tb:hover{background: #E7E7E7;}

</style>

</head>

<body>



<div align="center" class="td">



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №1

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №2

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №3

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №4

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №5

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №6

</div>



</div>

</body></html>

I2

38

indenger20

16 февраля 2016, 08:49

#1

ну наверное как-то так


.col-1 {

  min-width: 330px;

  width: 100%;

}

это одна колонка

если хотите в 3 колонки


.col-1 {

  min-width: 330px;

  width:33%;

  display:inline-block;

  padding: 0 15px;

  box-sizing: border-box;

}

и уберите у себя в стилях !important

нельзя так делать

Качественная верстка PSD макетов (/ru/forum/974524)

S

348

svv

16 февраля 2016, 09:09

#2

indenger20:

если хотите в 3 колонки


.col-1 {
  min-width: 330px;
  width:33%;
  display:inline-block;
  padding: 0 15px;
  box-sizing: border-box;
}

Не получается :(

Вариант с одной колонкой растягивает, но нужно, чтобы влезало максимум колонок (в зависимости от ширины экрана) и они растягивались до 100%. К примеру, минимальная ширина колонки 330px, а у пользователя монитор позволяет растянуть основной ДИВ до 1100px - влезают 3, но уже не по 330, а по 367

Резиновая верстка DIVами Вопрос по верстке Растянуть блок, по ширине

I2

38

indenger20

16 февраля 2016, 09:15

#3

да, еще родителю надо задать


.td {
  font-size: 0;
}

и " !important "проверьте, что бы не стоял

---------- Добавлено 16.02.2016 в 11:18 ----------

для этого есть медиа запросы


.col-1 {
  min-width: 330px;
  width:33%;
  display:inline-block;
  padding: 0 15px;
  box-sizing: border-box;
  vertical-align: top;
}

@media only screen and (max-width : 1100px) {
.col-1 {
  width:33%;
}
}
@media only screen and (max-width : 600px) {
.col-1 {
  width:50%;
}
}
@media only screen and (max-width : 400px) {
.col-1 {
  width:100%;
}
}

1

S

348

svv

16 февраля 2016, 09:25

#4

<html>

<head>

<title>Главная новостей города</title>

<style>

.td{border: 3px solid #000;}

.tb{display:inline-block; width:330px; background: #f1f1f1; border: 1px}

.tb:hover{background: #E7E7E7;}

@media only screen and (max-width : 1100px) {

.col-1 {

  min-width: 330px;

  width:33%;

  display:inline-block;

  padding: 0 15px;

  box-sizing: border-box;

  vertical-align: top;

}

}

@media only screen and (max-width : 600px) {

.col-1 {

  width:50%;

}

}

@media only screen and (max-width : 400px) {

.col-1 {

  width:100%;

}

}

</style>

</head>

<body>



<div align="center" class="td">



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №1

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №2

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №3

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №4

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №5

</div>



<div style="height: 260px;" class="tb col-1">

Краткая информация о новости №6

</div>



</div>

</body></html>

Все-равно не растягивает :(

I2

38

indenger20

16 февраля 2016, 09:34

#5

https://jsfiddle.net/xk1o35sc/

---------- Добавлено 16.02.2016 в 11:37 ----------

и min-width нужно удалить)

S

348

svv

16 февраля 2016, 15:40

#6

Правильно я понимаю, что с помощью @media only screen и делается адаптивный дизайн просто некоторые DIVы скрываются в более узких версиях?

L

108

lexter

16 февраля 2016, 15:48

#7

Я

то вижу себе так , вы делаете себе фиксированную ширину колонок к примеру 320 пикселей

потом както так

Для ul

position: relative;

display: table;

width: 100%;

для li

display: table-cell;

text-align: center;

---------- Добавлено 16.02.2016 в 19:49 ----------

или тупо фпихнуть <center><center>

Купить автомобиль из США можно тут (https://us-car.com.ua)

Список заблокированных URL-адресов в Вопрос по css - Растянуть блок, по ширине

S

348

svv

16 февраля 2016, 15:52

#8

indenger20:

@media only screen and (max-width : 1100px) {

В вышеприведенном примере максимальное значение 1100px

А как прописать для больших размеров?

Эти max-width для таблицы или страницы целиком?

I2

38

indenger20

16 февраля 2016, 18:16

#9

svv:
Правильно я понимаю, что с помощью @media only screen и делается адаптивный дизайн просто некоторые DIVы скрываются в более узких версиях?

Да. С помощью этих запросов, мы для одного блока, можем писать разные стили, в зависимости от ширины экрана

то есть


.col-1 {
//стили работают при любой ширине
  width:33%;
  display:inline-block;
  padding: 0 15px;
  box-sizing: border-box;
}
@media only screen and (max-width : 400px) { 
//при ширине экрана меньше или равно 400px ширина блока становится 100%
.col-1 { 
  width:100%; //перекрыло ширину, которая задана выше
}
}

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Зачем быть уникальным в мире, где все можно скопировать