2つの大きな列は、水平方向と垂直方向に中央に配置されます

Question

レイアウトを作成するにはどうすればよいですか？ （反応する）

私はすべてを分割して変換プロパティを使用しようとしましたが、左側のそれぞれのボックスに適用するにはいくつかの問題があります。私はこのレイアウトが最高のものかどうかは分からないが、それがほとんどの電話、コンピュータなどで動作しているかどうかは分かりません。

どうやってこの問題を解決しますか？

レイアウト（コンピューター）：

応答レイアウト（電話）：

これは、私のスクリプトは、これまでにどのように見えるか最善ではありません。

.page-4 { 
 
\t width: 100vw; 
 
\t background-color: #ffd9d2; 
 
\t z-index:3; 
 
\t min-height: 100vh; 
 
} 
 

 
.page-4 .box { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 1; 
 
} 
 

 
.page-4 .box .group { 
 
\t position: relative; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
} 
 

 
.left { 
 
    float: left; 
 
    max-width: 50%; 
 
} 
 
\t 
 
.right { 
 
    float: right; 
 
    max-width: 50%; \t 
 
} 
 
    
 
.group:after { 
 
    content:""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="page-4"> 
 
\t <div class="box"> 
 
\t \t <div class="group"> 
 
\t \t 
 
\t \t \t <div class="left"> 
 
\t \t \t \t <div class="page-4-heading">TEXT1</div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="right"> 
 
\t \t \t \t <div class="page-4-text">TEXT2</div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

何Flexbox

Here is fiddle where you can resize the visible area and see it change

* { box-sizing: border-box; } 
 

 
.wrap { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.wrap > .item { 
 
    border:solid 3px black; 
 
    padding: 10px; 
 
    width: 50%; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .wrap > .item { 
 
     width: 100%; 
 
    } 
 
}

<div class="wrap"> 
 
    <section class="item">1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</section> 
 
    <section class="item">2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</section> 
 
</div>

Answer 2

.page-4{ 
 
    width: 100vw; 
 
    min-height: 100vh; 
 
} 
 

 
.page-4 .box{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.page-4 .box .group{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 
.left, .right{ 
 
    width: 720px; 
 
    height: 300px; 
 
    border: 2px solid black; 
 
    padding: 20px; 
 
}

<div class="page-4"> 
 
\t <div class="box"> 
 
\t \t <div class="group"> 
 
\t \t 
 
\t \t \t <div class="left"> 
 
\t \t \t \t <div class="page-4-heading"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora hic voluptatum qui, consectetur harum exercitationem. Mollitia, at nesciunt cumque veritatis quia temporibus ex necessitatibus, voluptas suscipit explicabo ab, quos blanditiis.</div></div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="right"> 
 
\t \t \t \t <div class="page-4-text"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam, illum, dicta repudiandae ab quisquam dolore fuga nihil perferendis nesciunt vitae reprehenderit blanditiis porro esse? Vel rem eligendi numquam accusamus!</div></div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

どうdisplay: flexを使用してはどうですか？

そして、第二の提案は、その

@media screen and (max-width: 400px) { 
    /* Mobile */ 
} 
@media screen and (min-width: 401px) { 
/* Desktop */ 
} 

Answer 3

.page1,.page2{ 
 
width:50%; 
 
height:300px; 
 
background:grey; 
 
padding:10px; 
 
border:3px solid black; 
 
} 
 
.content{ 
 
border:1px solid black; 
 
background:grey; 
 
} 
 

 
@media (max-width:767px){ 
 
.page1,.page2{ 
 
width:100%; 
 
} 
 
}

<div class='page1'><div class="content"> some text</div> </div> 
 
<div class='page2'><div class="content">another text </div></div>

を使用する方法について任意のクエリのために