0
ここは初めてのことです。友人は、これを良い知識の源として提案しました。私はそれを必要としています。この流体グリッドレイアウトはどこで間違っていましたか？
ビューポート、メディアクエリ、および流体グリッドを使用してHTMLとCSSを記述して、デスクトップ（desktop example）からモバイル（mobile example）まで拡大するページを作成しようとしています。
私はw3cサイトの助けを借りてそれを一緒にしようとしましたが、特に役に立たなかった人は、そこにブートストラップがあると言いました（私はそれを使用するつもりはなかったが、それが何であるかは分かりません）。
私が達成したのは、モバイルサイズの仕事をすることですが、何らかの理由で、デスクトップの行の幅の50％と25％になるボックスの色の領域が彼らはすべき。
どうしたのですか？ヘルプは最も高く評価されました。私は劣等生であることだ場合
And this is the CSS: @charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 8px;
border: thin rgba(0, 0, 0, 1.00);
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
html {
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}
.navspot {
width: 100%;
max-width: 100%;
padding: 10px;
height: auto;
vertical-align: middle;
background: #d9cf91;
text-align: right;
}
.maincontent {
/*properties for cell*/
/*Nothing is required here
because we can use default styles*/
background: #30332c;
color: #FFFFFF;
padding: 10px;
}
.box1 {
background-color: #dfcf91;
color: #FFFFFF;
padding: 10px;
text-align: left;
float: left;
}
.box2 {
background-color: rgba(107, 35, 36, 1.00);
color: #FFFFFF;
text-align: center;
padding: 10px;
float: left;
}
.box3 {
background-color: #8D9981;
text-align: center;
padding: 10px;
float: left;
}
.box4 {
background-color: #606956;
text-align: center;
padding: 10px;
float: left;
}
.box5 {
background-color: #8D9981;
text-align: center;
padding: 10px;
float: left;
}
.box6 {
background-color: #606956;
text-align: center;
padding: 10px;
float: left;
}
.footer {
/*properties for cell*/
/*Nothing is required here because we can use default styles*/
/*background: #d9cf91;*/
padding: 10px;
}
/*for phone*/
@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
}
}<div class="row">
<div class="col">
<div class="navspot">Navigation Spot
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="maincontent">Main Content Spot
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box1">Box 1
</div>
</div>
<div class="col-6">
<div class="box2">Box 2
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="box3">Box 3
</div>
</div>
<div class="col-3">
<div class="box4">Box 4
</div>
</div>
<div class="col-3">
<div class="box5">Box 5
</div>
</div>
<div class="col-3">
<div class="box6">Box 6
</div>
</div>
<div class="row">
<div class="col">
<div class="footer">Footer Area
</div>
</div>
</div>申し訳ありません：
これは私が書いたhtmlです。本当にCSSと流動性のコンセプトに苦しんでいます。前もって感謝します！
コードスニペットを台無しにしました。 –
ボックスに列を塗りつぶしますか？ボックスクラスからfloatプロパティを削除してください – sol
色付き領域（.boxX）は全幅にすることはできません。float：leftのために最小限に抑えられます。そのため、列は視覚的に「見えません」。列レイアウトはうまくいくようです。 –