首页前端开发CSSdiv 居左靠左显示 CSS居左靠左

div 居左靠左显示 CSS居左靠左

时间2024-05-24 21:16:03发布访客分类CSS浏览135
导读:DIV居左靠右显示篇 DIV靠右居左需要CSS样式单词为CSS浮动float,设置float:left即可实现DIV盒子居左显示。 小例: 为了观察DIV是否靠左显示,我们设置其css宽度为300px;高度为120px;边框为1px黑色边框...

DIV居左靠右显示篇

DIV靠右居左需要CSS样式单词为CSS浮动float,设置float:left即可实现DIV盒子居左显示。

小例:
为了观察DIV是否靠左显示,我们设置其css宽度为300px; 高度为120px;边框为1px黑色边框,DIV命名为".div-left"

1、css代码:

  1. .div-left{ width:300px; height:120px; border:1pxsolid#000; float:left}

2、html应用代码片段:

  1. 此盒子是居左的

3、完整CSS+DIV代码:

  1. divcss5居左实例
  2. .div-left{ width:300px; height:120px; border:1pxsolid#000; float:left}
  3. /*css注释说明:float:left设置居左靠左*/
  4. 此盒子是居左的

大家可动手将以上代码拷贝使用观察结果,是否实现div标签盒子靠左居左显示。

4、案例截图:


div css实现盒子靠左居左实例截图

我们设置靠左靠右、居左居右都使用css浮动样式单词float,其样式值为left是居左,right是居右。

相关阅读:
1、div居右
2、div居中
3、div字体居中
4、div靠右
5、div图片居中

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: div 居左靠左显示 CSS居左靠左
本文地址: https://pptw.com/jishu/667291.html
div图片居中-图片在DIV内水平居中 无插件WordPress禁止英文半角符号自动转换成全角符号

游客 回复需填写必要信息