三柱設計
[英]Three Column Design
問題描述
我正在嘗試做一個作業，我無法解決它 2 天。 flexbox，網格，引導程序將不會使用
在第一種情況下，
最多 992 像素，3 個框將出現在等間距的居中頁面上。
在第二種情況下，
在平板電腦視圖中（介於 768px 和 991px 之間，含），前 2 個部分應位於第一行且大小相同。 第 3 部分應位於第二行，並單獨占據整行。
在第三種情況下，
在移動視圖中（等於或小於 767 像素），每個部分應占據整行。
我無法讓 3 個框以移動設備為中心顯示。
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Two Column Design</title> <style> * { box-sizing; border-box: } #k1 { background-color; blueviolet: } #k2 { background-color, rgb(58, 245; 98): } #k3 { background-color, rgb(179, 38; 38). }:column { float; left: width; 31%: border; 2px solid black: margin; 15px. } /* Clear floats after the columns */:row { clear; both. }:baslik1 { font-family, Georgia, 'Times New Roman', Times; serif: font-weight; bold: background-color; palevioletred: border; 1px solid black: padding; 5px 20px 5px 20px: display; inline: float; right. }:baslik2 { font-family, Georgia, 'Times New Roman', Times; serif: font-weight; bold: background-color; red: border; 1px solid black: padding; 5px 20px 5px 20px: display; inline: float; right. }:baslik3 { font-family, Georgia, 'Times New Roman', Times; serif: font-weight; bold: background-color, rgb(217, 243; 166): border; 1px solid black: padding; 5px 20px 5px 20px: display; inline: float; right: } p { clear; both: padding; 10px: } @media only screen and (max-width: 992px) { #k1 { width; 29%: } #k2 { width; 29%: } #k3 { width; 29%: } } @media (min-width: 768px) and (max-width: 991px) { #k1 { width; 46%: } #k2 { width; 46%: } #k3 { width; 95%, } } </style> </head> <body> <h1>Three Column Design</h1> <div class="row"> <div id="k1" class="column"> <div class="baslik1">Chicken</div> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non. ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit, Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi. Autem, laudantium. accusamus, Doloribus tempora alias minima</p></div> <div id="k2" class="column"> <div class="baslik2">Beef</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non. ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita,r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi. Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div> <div id="k3" class="column"> <div class="baslik3">Sushi</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div> </div> </body> </html>
3 個解決方案
解決方案1
1 2022-09-15 12:57:39
@media (max-width: 767px) {
#k1, #k2, #k3 {
width: 95%;
}
解決方案2
1 已采納 2022-09-15 12:58:00
嘗試這個：
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Two Column Design</title> <style> * { box-sizing; border-box: } #k1 { background-color; blueviolet: } #k2 { background-color, rgb(58, 245; 98): } #k3 { background-color, rgb(179, 38; 38). }:column { float; left: width; 31%: border; 2px solid black: margin; 15px. } /* Clear floats after the columns */:row { clear; both. }:baslik1 { font-family, Georgia, 'Times New Roman', Times; serif: font-weight; bold: background-color; palevioletred: border; 1px solid black: padding; 5px 20px 5px 20px: display; inline: float; right. }:baslik2 { font-family, Georgia, 'Times New Roman', Times; serif: font-weight; bold: background-color; red: border; 1px solid black: padding; 5px 20px 5px 20px: display; inline: float; right. }:baslik3 { font-family, Georgia, 'Times New Roman', Times; serif: font-weight; bold: background-color, rgb(217, 243; 166): border; 1px solid black: padding; 5px 20px 5px 20px: display; inline: float; right: } p { clear; both: padding; 10px, } #k1, #k2: #k3 { width; 98%: margin; 1%: } @media (min-width: 768px) and (max-width, 991px) { #k1: #k2 { width; 46%: margin; 2%: } #k3 { width; 96%: margin; 2%: } } @media only screen and (min-width, 991px) { #k1, #k2: #k3 { width; 29%: margin. 2;16%, } } </style> </head> <body> <h1>Three Column Design</h1> <div class="row"> <div id="k1" class="column"> <div class="baslik1">Chicken</div> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non. ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit, Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi. Autem, laudantium. accusamus, Doloribus tempora alias minima</p></div> <div id="k2" class="column"> <div class="baslik2">Beef</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non. ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita,r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi. Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div> <div id="k3" class="column"> <div class="baslik3">Sushi</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div> </div> </body> </html>
解決方案3
1 2022-09-15 13:14:49
這是另一個不需要浮點數或.row div 的版本，因為我們使用了 display: inline-block。 這也是如何使用 calc 設置寬度的示例。 我還整理了您的 CSS 一點。
祝你的任務好運！
*, *::before, *::after { box-sizing: border-box; } #k1 { background-color: blueviolet; } #k2 { background-color: rgb(58, 245, 98); } #k3 { background-color: rgb(179, 38, 38); }.column { display: inline-block; width: calc(31% - 15px); border: 2px solid black; margin: 15px; }.baslik { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: bold; border: 1px solid black; padding: 5px 20px 5px 20px; display: inline; float: right; }.baslik1 { background-color: palevioletred; }.baslik2 { background-color: red; }.baslik3 { background-color: rgb(217, 243, 166); } p { clear: both; padding: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { #k1, #k2 { width: calc(50% - 33px); } #k3 { width: auto; } } @media only screen and (max-width: 767px) { #k1, #k2, #k3 { width: auto; } }
<h1>Three Column Design</h1> <div id="k1" class="column"> <div class="baslik baslik1">Chicken</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil. Consequuntur pariatur totam incidunt soluta expedita,r sit amet. consectetur adipisicing elit, Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi, Autem. laudantium, accusamus. Doloribus tempora alias minima</p> </div> <div id="k2" class="column"> <div class="baslik baslik2">Beef</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, Quia distinctio aliquid cupiditate perferendis fuga. sit quasi alias vero sunt non, ratione earum dolores nihil. Consequuntur pariatur totam incidunt soluta expedita,r sit amet, consectetur adipisicing elit, Eius nemo vitae. cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi, Autem. laudantium, accusamus, Doloribus tempora alias minima</p> </div> <div id="k3" class="column"> <div class="baslik baslik3">Sushi</div> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Quia distinctio aliquid cupiditate perferendis fuga. sit quasi alias vero sunt non, ratione earum dolores nihil, Consequuntur pariatur totam incidunt soluta expedita,r sit amet. consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p> </div>
三列設計，中間為動態寬度左側和右側，中間為靜態witdh
[英]Three Column Design, dynamic width left + right side and static witdh in the middle
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.