бок о бок divs внутри div

Question

Я пытаюсь создать 3 divs со средним div, имеющим 2 divs внутри бок о бок. Проблема, с которой я сталкиваюсь, заключается в том, что при размере экрана> 768px 2 divs внутри сжимаются, а не 100% ширины? Любая помощь очень ценится!

https://jsfiddle.net/z3q2wtLf/embedded/result/

Ниже приведен пример того, что я пытаюсь достичь, но там что-то я не ловить в скрипку выше Thats предотвращения ниже результата.

#panel1 { 
 
    width:100%; 
 
    height:100px; 
 
    text-align:center; 
 
    background: #000000; 
 
} 
 

 
#container { 
 
    width:100%; 
 
    text-align:center; 
 
} 
 

 
#left { 
 
    float:left; 
 
    width:50%; 
 
    height: 20px; 
 
    background: #ff0000; 
 
} 
 
#right { 
 
    float:right; 
 
    width:50%; 
 
    height: 20px; 
 
    background: #0000ff; 
 
} 
 
#panel2 { 
 
    width:100%; 
 
    height:100px; 
 
    text-align:center; 
 
    background: #000000; 
 
}

<div id="panel1"> 
 
</div> 
 
<div id="container"> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
</div> 
 

 
<div id="panel1"> 
 
</div>

Answer 1

уступи вслушайтесь https://jsfiddle.net/z3q2wtLf/29/embedded/result/

Я переключил средства массовой информации:

@media only screen and (min-width: 768px) { 
    body { display: block; } 
} 

На container CSS, я добавил: min-height: 460px !important; (The "важно" обозначение может быть ненужным , но он работал, и я не стал тестировать его без него.)

Затем в вашем приводе аль HTML, я исправил орфографическую ошибку, когда вы писали «containter» вместо «контейнера»

И, наконец, я перешел к #panel1.panel1 и изменил верхние и нижние дивы к <div class="panel1"></div> вместо <div id="panel1"></div>. В HTML вы находитесь NEVER Предполагается, что два элемента имеют одинаковый идентификатор. Поэтому почему я сменил идентификатор на класс. (Вы можете повторно использовать классы столько, сколько хотите.)

Answer 2

В вашем CSS, у вас есть строка:

@media only screen and (min-width: 768px) { 
    body { display: flex; } 
} 

Это является причиной вашей проблемы.

Answer 3

Чтобы уйти от того, что сказал QuestionMarks

@media only screen and (min-width: 768px) { 
    body { display: flex; } 
} 

Вместо него с помощью гибкого трубопровода для отображения дивы, вы должны использовать этот один:

@media only screen and (min-width: 768px) { 
     body { display: inline-block; } 
    } 

Ключевым моментом здесь является использование дисплея: встроенный -блок; для отображения divs бок о бок.

Answer 4

Код, который вы написали здесь, не имеет проблем. Но в коде, который вы связали, элемент body имеет неправильный стиль, который делает проблему.

@media only screen and (min-width: 768px) { 
    body { display: flex; } 
}