-1
私は次のページを持っています（下のコードを見てください）。私は各項目を配置したいので、完全なWebページである場合、要素は希望の位置になりますが、狭いアスペクト比（携帯電話など）で表示されるとすぐに項目はお互いの下で倍になる。CSSの相対位置と絶対位置の比較
position: absolute;を使用して完全なWebページを作成できます。私は自分が望む場所にアイテムを配置することができます。しかし、問題は、モバイルディバイスでは、項目が重複しています。だから私はposition: relative;を使用する必要があると思う。
position: relative;は、アイテムを狭いブラウザで互いに折りたたむことができます。しかし、私は自分が望む場所にアイテムを配置することはできません。以下の例では
次のように、私はアイテムを配置したいと思います：
logo
title
text screen-print-one
google apple web screen-print-two
Terms of Service [email protected]
body {
\t font-family: "proxima-nova" ,"Helvetica", sans-serif;
}
/* logo */
.wz-logo {
\t text-align: center;
\t padding: 20px 20px 0px 20px;
}
/* title */
.wz-title {
\t font-size: 120%;
\t color: #B2D137;
\t text-align: center;
\t padding: 0 20px 40px 30px;
}
/* text */
.text-description {
\t padding-left: 10%;
\t padding-bottom: 20px;
\t padding-top: 20px;
\t width: 500px;
}
/* screen-prints */
.screen-prints {
position: relative;
\t float: right;
\t padding-right: 10%;
}
.screen-print1 {
position: relative;
top: 100px;
left: 0;
z-index: 2;
}
.screen-print2 {
position: relative;
\t top: -430px;
\t left: -120px;
\t z-index: 1;
}
/* store */
.store-container {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10%;
}
.store-container .apple, .img-container .google, .img-container .web {
\t padding: 10px;
\t padding-left: 20px;
}
.store-container .google {
\t padding-top: 0px;
\t padding-left: 0px;
\t padding-right: 0px;
\t margin-top: 10px;
}
.store-container .apple {
\t padding-top: 8px;
\t padding-left: 0px;
\t padding-right: 0px;
}
.store-container .web {
\t padding-top: 15px;
}
/* footer */
footer .terms, footer .contact {
\t display:inline-block;
\t padding-bottom: 30px;
\t padding-right: 10px;
\t padding-left: 10px;
}
footer .contact {
\t padding-right: 40px !important;
}
footer a {
\t color: white;
\t text-decoration: none;
\t font-size: 14px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
footer {
\t position:absolute;
\t bottom:0;
\t right: 0;
}<body class="background-image">
\t <div class="wz-logo">
\t \t logo
\t </div>
\t <div class="wz-title">
\t \t title
\t </div>
\t <div class="text-description">
\t \t text
\t </div>
\t <div class="screen-prints">
\t \t <div class="screen-print1">screen-print-one
\t \t </div>
\t \t <div class="screen-print2">screen-print-two
\t \t </div>
\t </div>
\t <div class="store-container">
\t \t <div class="google">
\t \t \t <a href="path to app on play store">google</a>
\t \t </div>
\t \t <div class="apple">
\t \t \t <a href="path to app on apple store">apple</a>
\t \t </div>
\t \t <div class="web">
\t \t \t <a href="path to website">web</a>
\t \t </div>
\t </div>
\t <footer>
\t \t <div class="terms">
\t \t \t <a href="terms.html">Terms of Service</a>
\t \t </div>
\t \t <div class="contact">
\t \t \t <a href="mailto:[email protected]" target="_top">[email protected]</a>
\t \t </div>
\t </footer>
</body>を誰もが、私はアイテムを配置することができますどのように役立てることができる場合、私は感謝手伝い。 （私の主な問題は、screen-print-one & screen-print-two）を配置しようとしていることがわかります。
ありがとうございます
広すぎます。これは、絶対的または相対的な配置を含むべきではありません（少なくとも大規模ではない） - 一般的なグリッドシステムがどのように機能するかについて読んでください。 – CBroe
私はあなたが 'position：relative'を異なって定義すると思いますが、[ここ]（https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/）にチェックしてください。 – Swellar
そして@CBroe言った、あなたは本当にそれを達成するためにそれらを使用する必要はありません。何人かのフロートがトリックになります – Swellar