0
私はテーブルのlookalike要素のレスポンシブデザインを作成中です。ワイドスクリーンでは、最大幅1200ピクセルの2×3要素（2行、3列）があります。画面の幅が800pxと1200pxの間にあるときは、「テーブル」を3x2（3行、2列）に変換し、幅が800px未満になるように、6行の列が1つだけ必要です。次のコードは、2x3要素を1200pxを超える幅で正しく表示しますが、画面サイズが小さくなると変換に失敗します。小さい画面でさらに行を並べ替えるdiv31
基本的に、問題は、私がメディアに置くべきは、これはmy work so farへのリンクです
@media screen and (max-width: 800px) {}
@media screen and (max-width: 1200px) {}
を照会しています。 SOの "Run code"は、幅が狭いので、物事を混乱させる。
このシナリオを処理するにはどうすればよいでしょうか？
html,
body {
height: 100%;
}
.wrapper-1 {
display: inline;
width: 400px;
height: 100px;
padding: 10px 10px;
}
.wrapper-3 {
display: inline;
width: 400px;
height: 100px;
padding: 10px 10px;
}
.left-side {
float: left;
width: 60px;
height: 100px;
margin-right: 15px;
}
.left-side > .image {
background: url(http://placehold.it/100x100) no-repeat center center;
width: 50px;
height: 50px;
margin-right: 10px;
margin-bottom: 10px;
}
.right-side {
float: left;
width: 285px;
height: 100px;
}
.right-side > .title {
margin: 0;
}
.element-container {
margin: 0 auto;
padding: 10px;
background-color: red;
max-width: 1200px;
}
.element {
margin: auto;
display: flex;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div class="element-container">
<div class="element">
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock</p>
</div>
</div>
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
</div>
</div>
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
</div>
</div>
</div>
</div>
<div class="element-container">
<div class="element">
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock</p>
</div>
</div>
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
</div>
</div>
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
</div>
</div>
</div>
</div>
</body>
</html>
Uを支援している願っています。 – Mardzis