Question

我设法得到一些帮助来正确对齐div，我试图将3个堆叠在彼此之上3次堆叠多达9个div 3彼此之上有信息...但文本正在被压扁起来。

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

<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

添加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;
}

div中的文字被压扁了

1 个答案: