html - div 内的文本被压扁

Question

我设法获得一些帮助来正确对齐 div，我尝试将 3 个 div 堆叠在一起 3 次，将最多 9 个 div(每 3 个 div)堆叠在一起并包含信息...但是文本被压扁了向上。

我试图防止文本保持在相同的宽度内，这样它就不会被压扁并且看起来很整洁。

http://jsfiddle.net/Sk9HJ/ - HTML+CSS

<div class="contain-info">
<table>
<tr>
<td>
<div class="info1">
<h1>WHAT IS IT?</h1>
<p>The internet is a Network of computers that are all connecting to create the global World Wide Web. All domains within the World Wide Web follow strict standardized communication protocols.</p>
</div>
</td>
<td>
<div class="info2">
<h1>USES</h1>
<p>Internet makes many activities easy and possible, some of these include but not limited to transferring files, Research, e-mail, chatting, social networks. A lot of business is also done over the internet although it is more secure then general browsing, this can include banking, online shopping, and money transfer.</p>
</div>
</td>
<td>
<div class="info3">
<h1>CONNECTING</h1>
<p>Connecting to the internet Requires:
A Reasonably up-to-date computer
A Telephone line, Spare power point
Ethernet cable *If required*
There are two main ways to connect to the internet at home. The first and most popular one is broad band or WiFi. As said in the name Wireless is a no wired way of connecting to the internet. Second we have though Ethernet cable, an Ethernet cable is a cable that connects devices to each other to provide internet from routers.</p>
</div>
</td>
</tr>
</table>

---

.contain-info {
 display: inline-block;
 width:100%;
 position: relative;
 text-align: center;
 margin-left: auto;
 margin-right: auto;

 }
table {
    margin: 0px auto;

}
td {
    height: auto;

}
.info1 {
 font-family: "Bebas Neue";
 text-align: center;
  margin-left: 100px;
  margin-right: 100px;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 margin-left: 100px;
 margin-right: 100px;

 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
  margin-left: 100px;
  margin-right: 100px;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

Answer 1

查看此Fiddle

添加宽度:100%；

table{
    margin: 0px auto;
    width: 100%;
}

您可以添加td百分比，例如width: 33.33%;。您也可以使用 padding 代替左右边距: padding: 5px;

td {
    height: auto;
    width: 33.33%;
    padding: 5px;
}