在网页设计中,常见的布局类型之一是两栏布局。对于两栏布局,通常有一栏用来放置图片,另一栏则用来放置文字。在CSS中,实现这种布局可以遵循一定的规则和技巧。 首先,需要在HTML页面中设置两个div容器
<div class="image-container"> <img src="example.jpg" alt="example"> </div> <br> <div class="text-container"> <p>这里放置文字内容</p> </div>
.image-container { width: 300px; float: left; }
.text-container { width: calc(100% - 300px); float: left; text-align: justify; }
.image-container img { display: inline-block; vertical-align: middle; } <br> .text-container p { display: inline-block; vertical-align: middle; }
.text-container { width: calc(100% - 300px); float: left; text-align: justify; }
粉丝
0
关注
0
收藏
0