Question

squares in square http://www.kheper.net/topics/civilization/four.gif

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

类似于montere.it减去JavaScript。

我试图突出显示有问题的代码，相应的CSS没有正确格式化，但我已经在下面链接了一个JS bin。抱歉，如果我的代码是意大利面条代码，那么我的代码就越少，复制和粘贴会话就越多。

#bodyHobbies {
    width: 100%;
    height: 500px;
}

.intbox1 {
    height: 25%;
    width: 100%;
    background-color: #009900;
    margin: auto;
    text-align: center;
}

.intbox2 {
    height: 25%;
    width: 100%;
    background-color: #990000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

.intbox3 {
    height: 25%;
    width: 100%;
    background-color: #000000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

.intbox4 {
    height: 25%;
    width: 100%;
    background-color: #990000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
</div>

https://jsbin.com/heyibe/edit?html,css,output

Answer 1

您可以使用 css3 flexbox 概念

完成此操作

＆＃13;

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  }
img{
  width:100%;
  }
#bodyHobbies{
  display:flex;
  flex-flow: row wrap;
  }
.item{
  flex-basis:50%;
  }

＆＃13;

<div id="bodyHobbies">
    <div class="intbox1 item"><p>1</p>
      <img src="https://i.stack.imgur.com/GSqmw.jpg" border="0" />
    </div>
    <div class="intbox2  item"><p>2</p>
      <img src="https://i.stack.imgur.com/GSqmw.jpg" border="0" />
    </div>
    <div class="intbox3 item"><p>3</p>
      <img src="https://i.stack.imgur.com/GSqmw.jpg" border="0" />
    </div>
    <div class="intbox4 item"><p>4</p>
      <img src="https://i.stack.imgur.com/GSqmw.jpg" border="0" />
    </div>
  </div>

＆＃13;

Answer 2

刚刚向display: inline-table添加了#bodyHobbies，并为intbox div添加了一个公共类。删除了与宽度和高度相关的各个intbox样式。

#bodyHobbies {
  width: 100%;
  height: 500px;
  display: inline-table;
}

.intbox {
  width: 50%;
  height: 50%;
  display: inline-block;
}
.intbox img {
  width: 100%;
}

.intbox1 {
  background-color:#009900;
  margin:auto;
  text-align:center;

}

.intbox2 {
  background-color:#990000;
  margin:auto;
  text-align:center;
  color:#FFFFFF;
}

.intbox3 {
  background-color:#000000;
  margin:auto;
  text-align:center;
  color:#FFFFFF;
}

.intbox4 {
  background-color:#933230;
  margin:auto;
  text-align:center;
  color:#FFFFFF;
}

<div id="bodyHobbies">
    <div class="intbox intbox1"><p>1</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
    <div class="intbox intbox2"><p>2</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
    <div class="intbox intbox3"><p>3</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
    <div class="intbox intbox4"><p>4</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
</div>

Answer 3

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

<style>
    .box{width:calc(50% - 2px); margin:2px; float:left; min-height:100px;}
</style>

Answer 4

试试这个

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

CSS

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

Answer 5

在css使用vw，vh个单位设置body，父元素width，height到100vw， 100vh。将[class=^"int"]选择器position设置为absolute。使用left伪类设置与视口中的四个位置对应的元素top和:nth-of-type()属性。 left:0vw，top:0vh; left:50vw，top:0vh; left:0vw，top:50vh，left:50vw，top:50vh。

body {
  width: 100vw;
  height: 100vh;
}
#bodyHobbies {
  width: 100vw;
  height: 100vh;
  display: block;
  position: relative;
  border: 2px solid sienna;
}
[class^="int"] {
  width: 50vw;
  height: 50vh;
  display: block;
  position: absolute;
  border: 2px solid gold;
}
[class^="int"]:nth-of-type(1) {
  left: 0vw;
  top: 0vw;
  background: blue;
}
[class^="int"]:nth-of-type(2) {
  left: 50vw;
  top: 0vh;
  background: green
}
[class^="int"]:nth-of-type(3) {
  left: 0vw;
  top: 50vh;
  background: red;
}
[class^="int"]:nth-of-type(4) {
  left: 50vw;
  top: 50vh;
  background: tan;
}

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

jsfiddle https://jsfiddle.net/69zkbjgw/

将div拆分为四个独立的div

5 个答案: