0
半分に分割されたdiv要素を取得しようとしています。バニラCSS（フレームワークなし）を使用したカスタムCssグリッド
これまでのところ私は初期設定をしていると思いますが、半分のうちの4つの四角形を生成しようとすると、もう一方の半分がオーバーフローし、半分の半分が等しくなくなってしまいます。私は、コードスニペットが
<!DOCTYPE html>
<html>
<head>
<title> Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
background: gray;
min-width: 100%;
}
.container {
min-width: 100%;
margin: 0 auto;
padding: 4px ;
}
[class*="col-"] {
float: left;
padding: 0;
margin: 0;
border: 0;
width:inherit
}
/* GRID SYSTEM */
.row::after {
content: '';
clear: both;
display: block;
}
@media only screen
and (min-width : 300px)
and (max-width : 640px) {
.col { float: left;}
.col { float: left;}
.mobile-not {
display:none;
}
}
@media only screen
and (min-width: 768px) {
.col { float: left;}
.col-6-md { width: 50%; }
}
@media only screen
and (min-width : 1224px) {
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-2-sm {width: inherit; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-6-md {
display:block;
width: inherit;
}
.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%; }
}
img {
width: 100%;
}
.text-demo {
background-color: #0099ff;
}
.text-prop {
padding-right: 20px;
color:white;
text-align: right;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-6">
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm mobile-not">
<div class="text-demo">
<div class="text-prop">
<br>
<font size="3.5"> <strong>Wcsho </strong> </font><br>
<font size="6"> <strong>Demo Site </strong><br></font><br>
<font size="3"> SALES: 888-888-1234<br>
SERVICE: 888-888-1234<br>
Custom: 888-888-1234<br>
</font>
<br>
<font size="2">
<a href="/hours-and-directions/">
918 greenville Rd,<br> uk
</a>
</font>
<br><br>
</div>
<br>
</div>
</div>
<br style="clear:both" />
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
すべてのヘルプは感謝だろうに役立つかもしれない願って、私は均等に収まるようにすべてを取得する方法を見つけ出すことはできません。
あなただけの彼らは、{25％}幅に設定していないでしょうか？ – admcfajn
幅を25％に設定しようとしましたが、現在のコードのように偶数の正方形を保持しません。フレックスボックスでどのように試してみるかの例を教えてください。 – Leafshinobi32
確かに、http://materializecss.com/をダウンロードしてください。その中にはまさにその例があります。 Flexの列が均等に収まるように伸ばします。より細かいコントロールが必要な場合は、max-widthプロパティを試してみてください。 – admcfajn