Html 将一个div分割为四个单独的div

（来源：）

我想要的效果是整个正方形是一个div，每个正方形是大div中的一个小div，正确对齐，以占据整个视口

类似于减JavaScript

我试图突出显示有问题的代码，相应的CSS格式不正确，但我在下面链接了一个JS bin。 抱歉，如果我的代码是意大利面代码，那么这不是我的代码，而是一个疯狂的复制粘贴会话

#身体爱好{
宽度：100%；
高度：500px；
}
.intbox1{
身高：25%；
宽度：100%；
背景色：#009900；
保证金：自动；
文本对齐：居中；
}
.intbox2{
身高：25%；
宽度：100%；
背景色：#990000；
保证金：自动；
文本对齐：居中；
颜色：#FFFFFF；
}
.intbox3{
身高：25%；
宽度：100%；
背景色：#000000；
保证金：自动；
文本对齐：居中；
颜色：#FFFFFF；
}
.intbox4{
身高：25%；
宽度：100%；
背景色：#990000；
保证金：自动；
文本对齐：居中；
颜色：#FFFFFF；
}

一,

二,

三,

四,

一,

二,

三,

四,

.box{宽度：计算（50%-2px）；边距：2px；浮动：左侧；最小高度：100px；}

试试这个

<div id="bodyHobbies">
<div class="intbox1"><p>1</p>
  <img src="foobar1.jpg" border="0" />
</div>
<div class="intbox2"><p>2</p>
  <img src="foobar.jpg" border="0" />
</div>
<div class="intbox3"><p>3</p>
  <img src="foobar.jpg" border="0" />
</div>
<div class="intbox4"><p>4</p>
  <img src="foobar.jpg" border="0" />
</div>

---

您可以使用css3flexbox概念来实现这一点

html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
img{
宽度：100%；
}
#身体爱好{
显示器：flex；
柔性流：行换行；
}
.项目{
弹性基准：50%；
}

一,

二,

三,

四,

刚刚添加了

display:inline table

到您的

#bodycabiods

，并向intbox divs添加了一个公共类。删除了与宽度和高度相关的各个intbox样式

#身体爱好{
宽度：100%；
高度：500px；
显示：内联表；
}
.intbox{
宽度：50%；
身高：50%；
显示：内联块；
}
.intbox img{
宽度：100%；
}
.intbox1{
背景色：#009900；
保证金：自动；
文本对齐：居中；
}
.intbox2{
背景色：#990000；
保证金：自动；
文本对齐：居中；
颜色：#FFFFFF；
}
.intbox3{
背景色：#000000；
保证金：自动；
文本对齐：居中；
颜色：#FFFFFF；
}
.intbox4{
背景色：#933230；
保证金：自动；
文本对齐：居中；
颜色：#FFFFFF；
}

一,

二,

三,

四,

在

css

使用

vw

，

vh

单位设置

主体

，父元素

宽度

，

高度

至

100vw

，

100vh

。将

[class=^“int”]

选择器

位置

设置为

绝对

。使用

：nth-of-type（）

伪类设置与视口中四个位置对应的元素

left

和

top

属性<代码>左侧：0vw，

顶部：0vh

<代码>左侧：50vw，

顶部：0vh

<代码>左：0vw，

顶部：50vh

，

左：50vw

，

顶部：50vh

正文{
宽度：100vw；
高度：100vh；
}
#身体爱好{
宽度：100vw；
高度：100vh；
显示：块；
位置：相对位置；
边框：2件实心锡耶纳；
}
[class^=“int”]{
宽度：50vw；
高度：50vh；
显示：块；
位置：绝对位置；
边框：2件纯金；
}
[class^=“int”]：第n个类型（1）{
左：0vw；
top:0vw；
背景：蓝色；
}
[class^=“int”]：第n个类型（2）{
左：50vw；
顶部：0vh；
背景：绿色
}
[class^=“int”]：第n个类型（3）{
左：0vw；
顶部：50vh；
背景：红色；
}
[class^=“int”]：第n个类型（4）{
左：50vw；
顶部：50vh；
背景：谭；
}

一,

二,

三,

四,

寻找CSS框架。会减少很多工作量，我觉得这很有趣，我正在做一个基于Montre.It的网站。他们用bootstrap创建了整个站点。用bootstrap实现这一点很简单。考虑使用它。当我添加一个图像时，它会溢出新的变化，只是添加了代码> IMG样式>代码>宽度：100%；代码>您可以根据需要进行其他更改。

<div id="bodyHobbies">
<div class="intbox1"><p>1</p>
  <img src="foobar1.jpg" border="0" />
</div>
<div class="intbox2"><p>2</p>
  <img src="foobar.jpg" border="0" />
</div>
<div class="intbox3"><p>3</p>
  <img src="foobar.jpg" border="0" />
</div>
<div class="intbox4"><p>4</p>
  <img src="foobar.jpg" border="0" />
</div>

 #bodyHobbies div{
   float: left;
   width: 50%;
  }