css多个div在同一行;html两个div同一行
在html制作中,有时候需要对让多个<div>在同一行显示,这个要怎么实现呢。需要多个div在同一行,我们都知道div默认的宽是100%所以需要给div设置一个宽,然后使用浮动float属性进行让div显示在一行上。
操作方法
- 01
打开html开发软件,在html开发工具上新建一个html页面,用于实现多个div显示在同一行上。
- 02
在html代码页面上创建两个div标签,然后给这个两个div标签添加class类,案例中class类分别为:one,two。 创建div代码: <div class="one">第一个div</div> <div class="two">第二个div</div>
- 03
创建<style>标签,设置class类one,two样式。需要设置宽、高、浮动、边框以及box-sizing属性。 css样式代码: <style> .one,.two{ width: 50%; height: 300px; border:1px solid #ccc; float: left; box-sizing: border-box; } </style>
- 04
设置好class类属性后,保存html代码,然后使用浏览器打开,即可看到两个div标签显示在同一列上。
赞 (0)