帶有響應元素的左-中-右內容

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 ，元素將自動換行到下一行。 我認為這符合您“不要互相混淆”的意思，但如果我錯了，請糾正我。

您的代碼將變成這樣（您可以運行代碼片段並調整瀏覽器 window 的大小以測試響應能力）：

 #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 數的結果。