0
我對我在這裏發佈的代碼進行了修改並修復了它，以便它可以完成我想要的操作，但是當瀏覽器是第三行時，行中的第三個元素會換行介於992px和1350px之間。當瀏覽器在992px和1350px之間時，第三行中的第三行代碼包裝到下一行，我嘗試過使用display：inline-block，left，rifght，center，float，flexbox和許多其他東西，但似乎沒有任何效果與在CSSS在調整瀏覽器大小後，第三個元素換行到下一行
CSS媒體查詢
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Times, Verdana, sans-serif;
font-size:100%;
}
}
/**** Row (for the responsive design***/
.row {
padding: 15%;
margin-right: 5px;
margin-left: 5px;
}
/**** Header ****/
header {
font-size: 24px;
margin-bottom: 35px;
padding-top: 2.5%;
text-align: center;
}
/**** Article styles and position ****/
#art1, #art2, #art3 {
display: inline-block;
float: left;
height: 40%;
width: 31%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 10px 10px;
}
/**** Article titles ****/
#lorem1 {
background-color: lightgreen;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
#lorem2 {
background-color: turquoise;
border: 1.5px solid black;
left: 70%;
top: 20%;
position: relative;
width: 30%;
margin-bottom: -28.9px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
}
#lorem3 {
background-color: crimson;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
/**** Content of the articles ****/
p {
border: 1px black solid;
overflow: hidden;
text-overflow: hidden;
}
.p1, .p2, .p3 {
background-color: mediumpurple;
color: gold;
padding: 35px 10px 10px 15px;
}
/**** Media queries ****/
/**Mobile devices**/
@media (max-width: 767px) {
* {
box-sizing: border-box;
margin: 0;
}
#art1, #art2, #art3 {
width: 94.5%;
display: block;
}
#art1, #art2, #art3 {
margin: 10px 20px 10px 20px;
}
}
/**Tablets**/
@media (min-width: 768px) and (max-width: 991px) {
*{
margin: 0; }
#art1, #art2 {
width: 45.5%;
display: inline-block;
}
#art3 {
display: inline-block;
width: 92%;
position: relative;
left: 2.5%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 40px 10px 20px;
}
/**Desktop computers**/
@media (min-width: 992px) and (max-width: 1199px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
flex-direction: row;
border: 2px solid red; /* not necesary just checkiing it'd appear on the screen*/
}
#art1, #art2, #art3 {
width: 31%;
height: 30%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
fle
}
}
/**** Deskptops above 1360px ****/
@media (min-width: 1200px) and (max-width: 1350px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display:flex;
flex-wrap: wrap;
justify-content: center ; /* for horizontal aligning of child divs */
align-items : center ; /* for vertical aligning */
}
#art1, #art2, #art3 {
width: 31%;
display: inline-block;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
}
}
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles-2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 2 assigment</title>
</head>
<body>
<section class="row">
<header>
<h1>Our Menu</h1>
</header>
<article id="art1" >
<h2 id="lorem1">Chiken</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art2" >
<h2 id="lorem2">Beef</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art3">
<h2 id="lorem3">Sushi</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
</body>
</html>
爲什麼你的H2元件絕對定位？這段代碼的一半沒有意義.. – rsn
是的這是sl，，你爲什麼使用引導類？你有沒有得到這個地方？ –
具有相對位置的H2在頁面的右側留有空白區域。這是爲了使用這種響應式設計所要求的東西。 –