Question

我有不同大小的文本，我想将它们放在页面中间的4个div中 image http://firepic.org/images/2015-08/22/0b0r536o40es.png

但似乎我的粉红色div推动了底部的粉红色{{1}}。我该如何解决？

由于

Answer 1

.wrapper {
  background: grey;
  height: 280px;
  width: 280px;
}
p {
  vertical-align: middle;
}
#one {
  background: blue;
  float: left;
  width: 140px;
  height:140px;
  text-align: center;
  
}
#two {
  background: pink;
  float: right;
  width: 140px;
  height:200px;
  text-align: center;
}
#three {
  background: aqua;
  float: left;
  width: 140px;
  height:140px;
  text-align: center;
}
#four {
   background: green;
  float: right;
  width: 140px;
  height:80px;
  text-align: center;
}

<html>
<body>
<div class="wrapper">
<div id="one"><p>TEXT</p></div>
<div id="two"><p>TEXT</p></div>
<div id="three"><p>TEXT</p></div>
<div id="four"><p>TEXT</p></div>
</div>  
</body>
</html>

Answer 2

您可以使用表

以下列方式实现所需的功能

＆＃13;

table {
  width: 50%;
  border-collapse: collapse;
  margin: auto;
}
tr > td {
  width: 50%;
  text-align: center;
  padding: 3px;
  vertical-align: top;
}

＆＃13;

<table>
  <tr>
    <td style="background: lightblue;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, officiis facere dignissimos saepe voluptates, porro itaque eveniet reiciendis eius perferendis?</td>
    <td style="background: pink">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores asperiores inventore eveniet quas praesentium, dignissimos cum omnis architecto</td>
  </tr>
  <tr>
    <td style="background: royalblue;">Lorem ipsum dolor inventore libero qui explicabo ea incidunt maxime blanditiis assumenda? Iusto, at ipsam eveniet!</td>
    <td style="background: cyan;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quis, quo ea est nostrum veniam?</td>
  </tr>
</table>

＆＃13;

4个不同大小的文本

2 个答案: