0
私がここに掲載したコードを修正して、それを修正して、ブラウザの次の行に3行目の要素をラップします992〜1350ピクセルです。ブラウザが992pxと1350pxの間にあるときは、3行目の次の行が次の行に折り返して表示されます。インラインブロック、左端、中央、浮動小数点、フレックス、その他の多くのことが表示されますが、 CSSは3番目の要素は、ブラウザのサイズ変更後に次の行に折り返されます。
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
これはうんざりです、なぜあなたはブートストラップクラスを使用していますか？あなたはどこかでこれを手に入れましたか？ –
相対的な位置のH2は、ページの右側に空白を残しました。そのレスポンシブなデザインの使用を頼んでいたことがありました。 –