الحصول على الكثير من المساحة البيضاء الفارغة تحت divs؟

0

(جديد جدًا في هذا) أنا أحصل على مساحة بيضاء كبيرة أسفل .grid# الطبقات ... لقد قمت بتلوينها بالزبرجد لإظهار المساحة التي يتم إنشاؤها تحت الصف الثاني من الصناديق. إذا كان أي شخص يعرف كيفية إصلاح هذا حتى تختفي المساحة الإضافية التي ستكون مفيدة للغاية.

أعتقد أنه قد تكون فئات الشبكة هي التي تعبث بها ، لكنني لست متأكدًا من كيفية تبسيط ذلك.

div{
        background-color:aquamarine;

    }

    .grid1 {
        float: center;
        margin: 0 auto;
        width:25vw;
        max-width: 25vh;
        height: 25vw;
        max-height: 25vh;
        font-size: 2rem;
    }
    .grid2 {
        float: center;
        margin: 0 auto;
        width:75vw;
        max-width: 75vh;
        height: 75vw;
        max-height: 75vh;
        font-size: 2rem;
    }
    .row {
        display: flex;
    }

    .box {
        background: red;
        margin: 5px;
        color: white;
        font-weight: bold;
        flex: 1 0 auto;
        position: relative;
    }

    .box:after {
        content: "";
        float: left;
        display: block;
        padding-top: 100%;
    }

    .box > div {
        background-position: center;
        background-size:cover;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
    }
    .inner1 {
        background-color: red;
    }
    .inner2 {
        background-color: blue;
    }
<body>

  <div class="grid1">
        <div class="row">
          <div class="box">
            <div class="inner1">1</div>
          </div>
        </div>
    </div>
    <div class="grid2">
        <div class="row">
          <div class="box">
            <div class="inner2">2</div>
          </div>
          <div class="box">
            <div class="inner2">3</div>
          </div>
          <div class="box">
            <div class="inner2">4</div>
          </div>
        </div>
      </div>
</body>

3 الاجابة

1
افضل جواب

أحد أفضل الممارسات في إنشاء / دمج القالب هو استخدام bootstrap. يعد Bootstrap معيارًا متزايدًا لسبب وجيه ... حتى لا تضطر إلى كتابة رمز يصعب الحفاظ عليه والذي سيفعل في النهاية نفس الشيء بالضبط الذي يُقصد به Bootstrap ويفعله بشكل جيد للغاية. بالإضافة إلى أنك ستجد طريقة المساعدة بشكل أسرع لأن الجميع سيفهمون ما تنوي القيام به وكيفية تصحيح الكود .. على أي حال: يجب إزالة "الارتفاع" من أجل الثني إلى الحجم المطلوب ..

.grid2 {
    float: center;
    margin: 0 auto;
    width: 75vw;
    max-width: 75vh;
    /* height: 75vw; */
    max-height: 75vh;
    font-size: 2rem;
}
:مؤلف
0

كانت المشكلة في فصل .grid2 الخاص بك. يمكنك إما إزالة خاصية الارتفاع أو تعيينها إلى قيمة مناسبة.

.grid2 {
        float: center;
        margin: 0 auto;
        width:75vw;
        max-width: 75vh;
        max-height: 75vh;
        font-size: 2rem;
    }
:مؤلف
0

div{
        background-color:aquamarine;

    }

    .grid1 {
        float: center;
        margin: 0 auto;
        width:25vw;
        max-width: 25vh;
        height: 25vw;
        max-height: 25vh;
        font-size: 2rem;
    }
    .grid2 {
        float: center;
        margin: 0 auto;
        width:75vw;
        max-width: 75vh;
        
        max-height: 75vh;
        font-size: 2rem;
    }
    .row {
        display: flex;
    }

    .box {
        background: red;
        margin: 5px;
        color: white;
        font-weight: bold;
        flex: 1 0 auto;
        position: relative;
    }

    .box:after {
        content: "";
        float: left;
        display: block;
        padding-top: 100%;
    }

    .box > div {
        background-position: center;
        background-size:cover;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
    }
    .inner1 {
        background-color: red;
    }
    .inner2 {
        background-color: blue;
    }
<body>

  <div class="grid1">
        <div class="row">
          <div class="box">
            <div class="inner1">1</div>
          </div>
        </div>
    </div>
    <div class="grid2">
        <div class="row">
          <div class="box">
            <div class="inner2">2</div>
          </div>
          <div class="box">
            <div class="inner2">3</div>
          </div>
          <div class="box">
            <div class="inner2">4</div>
          </div>
        </div>
      </div>
</body>

:مؤلف
فوق
قائمة طعام