製作4個方塊的正方形

Question

我正在研究一個涉及3件的css佈局。 1個正方形w /圖像，1個正方形，2個頂部正方形和1個底部矩形，以及1個正方形w/4個獨立正方形。我很確定我有第一個2下來，但我正在工作的那個，我有一個問題是它內部的方形瓦特/ 4方塊。

我有這樣的作品，但大視口之外的任何東西都會崩潰。這裏是我的代碼，有沒有人建立類似的東西？

.test { 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid red; 
 
    display: block; 
 
} 
 
.inner { 
 
    width: calc(49% + 13px); 
 
    display: inline-block; 
 
    height: 100px; 
 
    margin: 0px -6px 0px 0px; 
 
} 
 
.inner:nth-child(even) { 
 
    border: 1px solid blue; 
 
} 
 
.inner:nth-child(odd) { 
 
    border: 1px solid green; 
 
}

<div class="test"> 
 
    <div class="inner"> 
 
    1 
 
    </div> 
 
    <div class='inner'> 
 
    2 
 
    </div> 
 
    <div class="inner"> 
 
    3 
 
    </div> 
 
    <div class="inner"> 
 
    4 
 
    </div> 
 
</div>

Answer 1

如果你正在尋找一個2x2的網格，而不是使用flexbox話，我會漂浮，而不是inline-block。

* { 
 
    box-sizing: border-box; 
 
} 
 
.test { 
 
    border: 1px solid red; 
 
    overflow: hidden; // clearfix 
 
} 
 
.inner { 
 
    width: 50%; 
 
    float: left; 
 
    height: 100px; 
 
} 
 
.inner:nth-child(even) { 
 
    border: 1px solid blue; 
 
} 
 
.inner:nth-child(odd) { 
 
    border: 1px solid green; 
 
}

<div class="test"> 
 
    <div class="inner"> 
 
    1 
 
    </div> 
 
    <div class='inner'> 
 
    2 
 
    </div> 
 
    <div class="inner"> 
 
    3 
 
    </div> 
 
    <div class="inner"> 
 
    4 
 
    </div> 
 
</div>

box-sizing: border-box;允許包括填充和邊框與寬度/高度聲明。當填充和邊框會導致元素在不需要時纏繞時很有用。

Answer 2

當正在定義的寬度，任何屏幕其中寬度的1％小於13像素將會導致渦卷，因爲它不能適合2 DIV類內聯。爲什麼不只是設置width: 50%;？

編輯：我認爲你正在尋找一些類似的假設下：https://jsfiddle.net/tfovunso/

Answer 3

你的意思是這樣的？ 1個大廣場，從4個小廣場，並使用全寬度的包裝？

* { 
 
    box-sizing: border-box; 
 
} 
 
.test { 
 
    width: 100%; 
 
    height: auto; 
 
    box-shadow: 0 0 0 1px red; 
 
    display: block; 
 
} 
 
.test:after { 
 
    content: ' '; 
 
    clear: both; 
 
    display: block; 
 
} 
 
.inner { 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
    display: block; 
 
    padding-top: 50%; 
 
    margin: 0; 
 
} 
 
.inner:nth-child(even) { 
 
    box-shadow: inset 0 0 0 1px blue; 
 
} 
 
.inner:nth-child(odd) { 
 
    box-shadow: inset 0 0 0 1px green; 
 
} 
 
.inner > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    overflow-y: auto; 
 
    padding: 10px; 
 
}

<div class="test"> 
 
    <div class="inner"> 
 
    <div>1</div> 
 
    </div> 
 
    <div class='inner'> 
 
    <div>2</div> 
 
    </div> 
 
    <div class="inner"> 
 
    <div>3</div> 
 
    </div> 
 
    <div class="inner"> 
 
    <div>4</div> 
 
    </div> 
 
</div>

Answer 4

嘿男人是你在找什麼？

https://jsfiddle.net/jpezninjo/0bp0ha03/

idk what goes here dammit stackoverflow 

的代碼應該很容易理解。奇怪的孩子正在向左飄浮，我甚至讓孩子們佔據了剩餘的空間。請注意，我必須刪除您的margin: 0px -6px 0px 0px。

我正在使用一些名爲「塊格式化上下文」的東西，我瞭解瞭如何使某個div在前一段時間佔用剩餘寬度。

它要求你要擔起x中剩餘的寬度有div的overflox: hidden和float: none

您可以在這裏找到的帖子：Expand a div to take the remaining width