我正在做一项作业，两天都解决不了。flexbox、网格、引导程序将不使用
在第一种情况下，
最多992个像素，3个框将出现在等距居中的页面上。
在第二种情况下，
在平板电脑视图中(包括768px和991px(，前两个部分应该在第一行，大小相等。第三部分应在第二行，并单独占据整行。
在第三种情况下，
在移动视图中(等于或小于767px(，每个部分应该占据整行。
我无法将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>试试这个：
<!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>@media (max-width: 767px) {
#k1, #k2, #k3 {
width: 95%;
}
这是另一个不需要float或.rowdiv的版本，因为我们使用了display:inline块。这也是一个如何使用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>