个人中心
gpt4 book ai didi

html - 使用 Vanilla Css 的自定义 Css 网格(无框架)

转载 作者：行者123 更新时间：2023-11-28 03:44:24 25 4
gpt4 key购买 nike

我试图获得一个分成两半的 div 元素，其中一半有 4 个相等的方框。

到目前为止，我认为我已经完成了初始设置，但是当我尝试在其中一半中生成 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>

如有任何帮助，我将不胜感激，我不知道如何让所有东西都同样适合。

最佳答案

这是一个使用 flexbox 和纯 CSS 的例子。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.row{
  display: flex;
}
.col{
  flex: 1;
  margin: 0 1rem;
  border: 1px solid black;
}
.square{
  background-color: red;
  flex: 1;
}

.square:after{
  content: '';
  display: block;
  padding-bottom: 100%;
}
<div class="row">
  <div class="col"></div>
  <div class="col row">
    <div class="col square"></div>
    <div class="col square"></div>
    <div class="col square"></div>
    <div class="col square"></div>
  </div>
</div>

关于html - 使用 Vanilla Css 的自定义 Css 网格(无框架)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44062005/

25 4 0
文章推荐： css - word vba创建具有个性化风格的条目
文章推荐： javascript - 如何在 Three.js 中将 `Parentobject1` 转换为 `childobject2` 、 `childobject3` 添加或绘制？
文章推荐： javascript - 使用 EventHandler 更改文本颜色的问题
文章推荐： javascript - 无法显示之后添加的元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com