CSS是网页设计中不可或缺的一部分,我们可以利用CSS来实现网页布局的各种效果,其中最基本的就是两行两列的div布局。下面我们来看一下怎么实现这个布局。 <style> .
CSS是网页设计中不可或缺的一部分,我们可以利用CSS来实现网页布局的各种效果,其中最基本的就是两行两列的div布局。下面我们来看一下怎么实现这个布局。
<style> .container { display: flex; flex-wrap: wrap; } .left-column { width: 50%; height: 200px; background-color: #e8e8e8; box-sizing: border-box; padding: 20px; } .right-column { width: 50%; height: 200px; background-color: #fff; box-sizing: border-box; padding: 20px; } </style> <div class="container"> <div class="left-column"> <p>左边一列</p> <p>左边一列</p> </div> <div class="right-column"> <p>右边一列</p> <p>右边一列</p> </div> </div>
首先,我们创建一个父元素container来包含两个子元素left-column和right-column。我们使用了flex布局,并且设置了flex-wrap属性为wrap,这可以让我们的布局在窄屏幕下也能适应。
之后,我们对子元素进行样式的编写。我们设置了子元素的宽度为50%,这样就可以使其一行两列排列。因为盒子模型中的padding和border也会影响宽度和高度,所以我们使用box-sizing属性来规定如何计算元素的宽度和高度。接着,我们为子元素添加了一些背景颜色和内边距,使其更加美观。
最后,我们把左边和右边的内容放到p标签里面,这样可以让内容更加具有可读性。整个布局的代码已经完成了,现在我们就可以在我们的网页中实现这个布局啦!
粉丝
0
关注
0
收藏
0