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

Question

الحصول على الكثير من المساحة البيضاء الفارغة تحت 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>

Mogie :مؤلف
30.07.2018, 18:13

مشاركة الرابط

مصدر

3 الاجابة

0

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

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

pal :مؤلف
30.07.2018, 15:51

مشاركة الرابط

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>

godfather :مؤلف
30.07.2018, 15:28

مشاركة الرابط

أسئلة ذات صلة

الزر محاذاة إلى اليسار في بطاقة Bootstrap 2 الاجابة
شبكة css - امتداد متغير للعناصر 1 إجابة
زيادة الكمية الديناميكية الثانية قضية تؤثر على الكمية الأولى 1 إجابة
تريد أن تجعل div بلا محتوى تستجيب لارتفاع div المجاور 2 الاجابة
Python: في كل مرة يحدث فيها "مسح" ، أريد أن يقترن النص بقائمة 2 الاجابة
كيفية استخدام الصورة في <img> في Angular 5 3 الاجابة
div داخلي قابل للتمرير مع أقصى ارتفاع 3 الاجابة
تحديد إذا خلل لعبة بيان 1 إجابة
كيفية جعل هذه النافذة المنبثقة تستجيب بحجم شاشة مختلف 3 الاجابة
دمج جافا سكريبت و CSS في ملف HTML 3 الاجابة

أسئلة شائعة:

علامات السؤال:

html

css

Hichem Al Abbessi · Accepted Answer · 2018-07-30T15-32-17.000Z

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

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