div中的文本被压缩

Question

我设法得到了一些帮助来正确对齐div，我试图将3个堆叠在一起3次堆叠到9个div，其中3个在彼此之上。但是文字被压扁了

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

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

看这个

添加width: 100%;

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

可以添加percentage on td，如width: 33.33%;。也可以用padding代替左右边距:padding: 5px;

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