<div> <div style="float: left; width: 49%; margin-right: -100%; padding-right: 20px;"> 第一列内容 </div> <div style="float: left; width: 49%; margin-left: 20px;"> 第二列内容 </div></div>
在这个例子中,第一列div有一个负的margin-right,这会使得第二列div向左移动,从而减少两列之间的间距。同时,第一列div有一个padding-right来增加列内的间距。
方法4:利用CSS Grid布局<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;"> <div>第一列内容</div> <div>第二列内容</div></div>
在这个例子中,grid-gap属性用于设置两列之间的间距。
方法5:利用Flexbox布局<div style="display: flex;"> <div style="flex: 1;">第一列内容</div> <div style="flex: 1; margin-left: 20px;">第二列内容</div></div>
在这个例子中,第二列div有一个向左的外边距margin-left: 20px;,这会在两列之间创建20像素的间距。
方法6:利用内联块元素
<div> <div style="display: inline-block; vertical-align: top; margin-right: 20px;">第一列内容</div> <div style="display: inline-block; vertical-align: top;">第二列内容</div></div>
在这个例子中,两列div被设置为内联块元素,并且第一列div有一个向右的外边距。
可以根据布局需求和偏好选择得当的方法来调度两列div之间的间距。记得调度margin或padding的值以知足设计哀求。