Верстка средствами DIV - смещение из малого размера в больший

Статус
Закрыто для дальнейших ответов.

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
Вопрос DIV верстке.
На странице в один ряд стоят 2 div, первый 660px и второй 380px - левый имеет ширину 380 px в отличии от правого и он при изменении размера страницы на меньший сдвигается в низ. Этот сдвиг в низ под левый блок (у которого 660px) нужен, но нужно что бы он принимал размер больший с 380 на 660px - как тот блок который остается с верху.
Как div которому задали параметры меньшие (380px) сделать так что бы он при сдвиге в низ принимал другие установленные (680px) размеры?

Вот мой код:
Код:
 #line_block{ 

min-width: 380px;
max-width: 660px;
height:avto; 
        background:#f1f1f1; 
        float:left; 
        margin: 0 15px 15px 0; 
        text-align:left;
        padding: 10px;
        }
Или - этот, который то же не может решить задачу:


Код:
@media screen and (min-width: 380px) {

#line_block-t {
min-width: 380px;
max-width: 660px;
  height: avto;
background: #f1f1f1;
float: left;
text-align: left;
padding: 10px;
}
}
Но даже он не может раздвинуть блок до нужного размера = 660px если происходит его смещение в низ под другой.
Подскажите какое свойство нужно добавить?
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
В тот момент когда меньший блок падает под большой применяй @media
В данном случае 660+380

@media (max-width:1040px){
#line_block-t {
max-width: 660px;
min-width: 100%;
}
}
(остальные стили по вкусу)
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
BaNru сказал(а):
В тот момент когда меньший блок падает под большой применяй @media
В данном случае 660+380

@media (max-width:1040px){
#line_block-t {
max-width: 660px;
min-width: 100%;
}
}
(остальные стили по вкусу)
Поставил - не работает как надо. Правый блок уже изначально стал 680px и когда складывается (уходит на второй ряд под Левый) - так же имеет тот же размер 680px.
Вот код:
Код:
<style>

#line_block{ 
min-width: 380px;
max-width: 660px;
height:avto; 
        background:#f1f1f1; 
        float:left; 
        margin: 0 15px 15px 0; 
        text-align:left;
        padding: 10px;
        }
#line_block-t{ 
min-width: 380px;
max-width: 660px;
height:avto; 
        background:#f1f1f1; 
        float:left; 
        text-align:left;
        padding: 10px;
        }
@media (max-width:1040px){
  #line_block-t {
    max-width: 660px;
    min-width: 100%;
  }
} 
</style>
- Что же не так или такое действия сценария вообще не выполнимо?
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Ну так ты обоим прописал

min-width: 380px;
max-width: 660px;
Конечно у тебя оба будут по 660.

Если я правильно понял, то всё проще, чем ты пытаешься сделать:
https://jsfiddle.net/BaNru/8vt32xgj/
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
[member=BaNru],
Зашел. Посмотрел, немного не так нужно сделать (я так и не понял что там и куда вставлять - что бы видеть результат) - вот примитивный (казалось бы) код:
Код:
<style type="text/css">

@media screen and (max-width: 1040px) {
.line_block-t {
width: 660px !important;
}
}
.wrapper{
max-width: 1040px;
}
.line_block{
width: 660px;
height: 500px;
background: red;
float: left;
}
.line_block-t{
min-width: 280px;
height: 380px;
float: left;
background: green;
}
</style>
<div class="wrapper">
<div class="line_block"></div>
<div class="line_block-t">
</div>
</div>
- На странице (просто, на пустой странице без нужного заполнения страницы) он главное работает - смещает блоки правый под левый, а ставлю на страницу и прописываю в css, так не желает работать.
Не могу понять что и как сделать.

А прописал - да, прописал в css, даже вместо . (точки) # (решотки) поставил, так:

Код:
         /* Ставим класс обьеденить wrapper */ 

#wrapper {
 max-width: 1040px;}


        /* Ставим класс line_block - стоит с лева */
#line_block{
 width: 660px;
 height: 520px;
 float: left;
}
        /* Ставим класс line_block-t - стоит справа*/
#line_block-t {
 min-width: 280px;
 height: 380px;
 float: left;
}
- а воз и ныне там(а) .
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
BaNru сказал(а):
В тот момент когда меньший блок падает под большой применяй @media
В данном случае 660+380

@media (max-width:1040px){
#line_block-t {
max-width: 660px;
min-width: 100%;
}
}
(остальные стили по вкусу)
ОТЛИЧНО! Ваш вариант помог. Блоки стали сдвигаться как и требовалось.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Ну и отлично!
 
Статус
Закрыто для дальнейших ответов.
Верх Низ