Question

我试图创建3个div，中间div并排有2个div。我遇到的问题是，在屏幕尺寸> 768px时，内部的2个div被压扁而不是100％宽度？非常感谢任何帮助！

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

下面的代码是我尝试实现的一个例子，但是我没有抓住上面的小提琴，以防止出现以下结果。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

在CSS中，您有一行：

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

这是您的问题的原因。

Answer 2

看看：https://jsfiddle.net/z3q2wtLf/29/embedded/result/

我将媒体切换到：

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

在container CSS上，我添加了min-height: 460px !important;（“重要的”符号可能是不必要的，但它有效，如果没有它，我就不会费心去测试。）

然后在您的实际HTML中，我修改了拼写错误，其中您编写了“ containter ”而不是“ container ”

最后，我将#panel1切换为.panel1，并将顶部和底部div更改为<div class="panel1"></div>而不是<div id="panel1"></div>。在HTML中，您 NEVER 应该为两个元素提供相同的ID。因此，为什么我将ID更改为类。（您可以根据需要重复使用类。）

Answer 3

关于QuestionMarks所说的话

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

而不是使用flex来显示你的div，你需要使用这个：

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

这里的关键是使用display：inline-block;并排显示div。

Answer 4

你在这里写的代码没有问题。但是在您链接的代码中，body元素的错误样式会产生问题。

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

在div内并排div

4 个答案: