文本大小不同的

我有不同大小的文本，我希望把它们变成4个格在页面一样， image http://firepic.org/images/2015-08/22/0b0r536o40es.png 文本大小不同的

中间，但似乎什么我的粉红色div推动底部的人下。我该如何解决它？

感谢

2015-08-22 Allan

能否请您提供哟你的代码。 –

如果您想要盒子的高度和宽度相同，请为使用2行和2列的文本使用表格。 – Muhammad

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

来源

2015-08-22 20:50:27 Szili

您可以使用一个表达到您想要的功能通过以下方式

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

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

来源

2015-08-22 20:44:07 Muhammad

文本大小不同的

回答

相关问题