Question

我正在制作涉及3件的CSS布局。 1个正方形w /图像，1个正方形，2个顶部正方形和1个底部矩形，以及1个正方形w / 4个正方形内的正方形。我很确定我有前两个，但我正在研究的那个我遇到问题的是它里面有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

当您定义宽度时，宽度的1％小于13px的任何屏幕将导致换行，因为它不能适合2个div类内联。为什么不设置width: 50%;？

编辑：我假设您正在寻找类似于此的内容：https://jsfiddle.net/tfovunso/

Answer 2

你是说这样的意思吗？ 4个较小的正方形的1个大正方形，并使用全宽的包装纸？

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 3

如果您正在寻找2x2网格但未使用flexbox，那么我会浮动而不是inline-block。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

box-sizing: border-box;允许您在宽度/高度声明中包含填充和边框。当你不想要它们时，填充和边框会导致元素换行，这很有帮助。

Answer 4

嘿，这是你正在寻找的人吗？

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

idk what goes here dammit stackoverflow

代码应该很容易理解。奇怪的孩子向左漂浮，我让偶数孩子占用剩下的空间。请注意，我必须删除您的margin: 0px -6px 0px 0px。

我正在使用名为＆＃34;阻止格式化上下文的内容＆＃34;我学会了如何使用div来获取剩余的宽度。

它要求您想要占用x剩余宽度的div具有overflox: hidden和float: none

您可以在此处找到帖子：Expand a div to take the remaining width

制作4个方格的正方形

4 个答案: