Question

内容必须及时响应，以免彼此混淆 HTML：

<div id="ContentPanel1">
  <div id="ContentLeft1">  Mars (Distance: 100) </div>
  <div id="ContentMiddle1"> Middle </div>
  <div id="ContentRight1"> Right </div> 
</div>

CSS：

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentMiddle1 {
    background:Orange;
    float: left;
    width: calc(100% - 160px);
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}

我知道大多数答案已经在stackoverflow中了，但是我认为它们都不是响应式设计，它们都是硬编码的。这就是为什么我再次问这个问题...

Answer 1

如评论中所述，使用display: flex可以轻松实现。如果为每个元素设置min-width或width，并使用flex-wrap: wrap，则元素将自动换行到下一行。我认为这符合“不要互相混淆”的意思，但如果我错了，请纠正我。

您的代码将变成这样（您可以运行代码段并调整浏览器窗口的大小以测试响应性）：

#ContentPanel1 {
    text-align:center;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
#ContentLeft1 {
    background:Yellow;
    width: 80px;
}
#ContentMiddle1 {
    background:Orange;
    width: calc(100% - 160px);
    min-width: 200px;
}
#ContentRight1 {
    background:Blue;
    width: 80px;
}

<div id="ContentPanel1">
  <div id="ContentLeft1">  Mars (Distance: 100) </div>
  <div id="ContentMiddle1"> Middle </div>
  <div id="ContentRight1"> Right </div> 
</div>

Answer 2

在css width：33.3％'box-sizing：border-size;中的每个类中添加以下内容：注意：将宽度设为100％除以每行所需的div数即可。

带有响应元素的左-中-右内容

2 个答案: