html调整div上下顺序,用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose

最新推荐文章于 2021-06-21 18:22:25 发布
最新推荐文章于 2021-06-21 18:22:25 发布
阅读量280 收藏
点赞数
文章标签： html调整div上下顺序
本文探讨了在CSS布局中遇到的一个问题，即在设置`margin-top`属性试图在两个`input`元素间创建间距时无效。解决方案是通过浮动元素并调整`margin-top`来实现所需间距。作者建议避免过度使用层和复杂样式，保持HTML结构简洁。此外，还提供了快速修复代码示例。
摘要由CSDN通过智能技术生成

先看代码

username_06.jpg

password_09.jpg

#formpanel{width:341px;height:135px;margin-left:auto;margin-right:auto;}#username_field{margin-top:0px;width:340px;}#usernamepic{float:left;margin-top:0px;margin-left:0px;}#inputfield{float:right;margin-top:0px;margin-right:0px;width:228px;height:27px;}#password_field{width:340px;}

现在出现的问题是我想出现这样的结果

但是却出现了这样的结果

我在password中设置margin-top却不管用，这是为什么？我想在两个input中间空出24个像素。

回复讨论(解决方案)

#password_field{

margin-top:10px;

width:340px;

}

username_06.jpg

password_09.jpg

最快的方法就是：

#password_field{

float:right;

width:340px;

margin-top:24px;

}

希望对你有帮助，欢迎回访!!

用户名同密码一样的布局为什么还要两个不同层，增加无谓的样式，

用户名：

密码：

简单东西不要复杂化，html上面的足矣。

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

weixin_39604092
关注
手机端html流行的表格样式,求移动端一个这样的表格该怎样做_html/css_WEB-ITnose
weixin_34378978的博客
06-20 785
要自适应屏幕div+css 是h5横着40%、60% 右边上下80%、20%回复讨论(解决方案)那你直接写啊左面div 40%宽度 右面div 60%宽度最前面加这个样式那你直接写啊左面div 40%宽度 右面div 60%宽度最前面加这个样式主要就是右边那个大层里几个小的怎么写不会用div就用table套table吧 也是可以的不会用div就用table套table吧 也是可以的table我会 ...
html 排序div,html – 使用CSS重新排序DIV
weixin_33563262的博客
06-07 409
给定一个模板，其中由于其他要求，HTML不能被修改，当它们在HTML中不按顺序显示(重新排列)一个div到另一个div上时如何？两个div都包含高度和宽度不同的数据。Content to be below in this situationContent to be above in this situationOther elements希望很明显，期望的结果是：Content to be ab...
div设置float:left不并排的解决方法
Yan-note
12-25 2272
解决方法： 设置宽度，width: , 如果不设宽度，div不能排成一列
html调整div上下顺序,使用CSS更改DOM元素顺序（Crocodoc）
weixin_31738297的博客
06-04 2046
我很晚参加派对，但我只是想让大家知道你实际上可以单独使用CSS来更改DOM顺序。尽管要做到这一点，我们必须使用CSS3 flexbox语法。所以基本上IE10 +在我的情况下通常不会成为问题，因为我使用它来操作移动网站。那么我们该怎么做呢？ 父级需要成为Flexbox元素。例如：(仅使用此WebKit的供应商前缀的CSS是耀眼的，因为它是没有它。)#main {display: -webkit-b...
html 按设备使用css,根据设备宽度使用CSS更改div顺序
weixin_30531679的博客
06-21 263
得益于出色的flexbox规范，这在CSS中是可行的。使用order和flex-flow属性，我们可以实现您想要的。无前缀的IE11和所有常绿浏览器将支持此功能。IE10前缀-ms-order，不支持flex-flow。该解决方案考虑了您列出的所有约束：将指定顺序的元素列表显示为一行。如果窗口太小，请更改它们以显示在列中。当元素在列中显示时，更改它们的顺序。由于堆栈代码段的限制，您需要以整页模式查...
html-DIV-demo.rar_DIV CSS美观_DIV DEMO html_demo html div_div de
09-23
在这个压缩包中，包含了一个名为"html-DIV-demo"的文件，这很可能是HTML文件或者一个包含多个文件的目录，用于演示如何有效地使用HTML的DIV元素配合CSS实现页面美化。 首先，我们来理解HTML中的`<div>`标签。`<div>...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
**Div+CSS布局详解** Div（Division）+CSS（Cascading Style Sheets）布局是网页设计中的核心概念，它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf"，是一份全面的学习Div+CSS布局...
DivCSS.rar_ divcss_divcss
09-21
《深入理解DivCSS：构建网页布局的艺术》 在网页设计领域，HTML与CSS是不可或缺的基础技术，而DivCSS则是HTML布局的重要组成部分。本篇将基于提供的资料“DivCSS.rar”中的“DivCSS.pdf”，深入探讨DivCSS的核心...
Div+CSS.rar_DIV_css_div css 教程
09-22
**Div+CSS布局详解** Div（Division）与CSS（Cascading Style Sheets）是网页设计中的核心元素，它们一起构成了现代网页的结构和样式。在网页设计中，Div主要用于定义页面上的区块，而CSS则负责控制这些区块的样式...
float 造成div错位问题
blue2048
10-23 1381
我们控制页面div时经常会使用float来控制浮动效果，但是如果一个div内所有元素都浮动了，我们会发现了里面的元素并没有将外部的div元素[i]撑开[/i][b][/b]，实际上，这是应为浮动元素不在正常的页面文档流中造成的 解决办法也很简单，在div中再加入一个div元素，设置其css属性，clear=both即可...
ie浏览器float right 向下错位解决办法
weixin_30835649的博客
08-28 334
ie360 浏览器float right 向下错位解决办法span 当设置其float:right;时，其向下一行错位时最佳办法：将span移到所要显示的文字前面 其次办法：在span母容器的css里添加position:relative; 在span的css里添加position:absolute;right:0px;解决。 我选择第一种，搞定！ 转载ht...
css float的代码顺序和html页面显示顺序的问题
萧逸才的博客
05-14 2577
这其实不什么大problem，但是不注意的话也是不小的麻烦，so…… 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .div-right{ margin:0px; padding: 0px; height: 100px; wi
css - 防止float浮动效果影响下面div布局
Beluga_白鲸
09-03 1万+
为了防止float，min-height等具有浮动效果的代码影响上下的div样式布局，可以要加上一个空白的div，其css属性为clear 其 css要用 ： .clear { clear: both; }
float使两个按钮位置先后位置自动调整
qq_23264257的博客
08-04 485
[img]http://dl2.iteye.com/upload/attachment/0119/1428/825dd73e-3398-32ed-a580-aaef09730d97.png[/img] [img]http://dl2.iteye.com/upload/attachment/0119/1432/5163f194-e93b-3fba-b38b-b801c9948a73.png[/...
关于float浮动的块级元素在编写html时先后顺序对布局的影响
曾大大的博客
03-24 5994
闲来没事，在做2016年百度前端技术学院，任务三：三栏式布局 看了下任务需求： 感觉 so easy，于是立马动手写了！ html部分 css部分 结果一看： 刚看到这个结果时感觉脸都绿了，然后调出css仔细看哪里写错了： 找了半天也没看出css哪里写的不对，之后我又看了下学院里面其他同学
html设置网页div的显示层次顺序z-index
热门推荐
夜空的流星的专栏
03-09 3万+
z-index定义和用法 z-index 属性的值设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！说明该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近（靠上层），为负数则表示离用
html和css实现 div 切割 并使多个div上下左右排列
qq_41135605的博客
04-05 2万+
首先看我的div布局： 图片有6个div有序排列，位置上下左右不一。 方法1：最简单的做法是设置每个div的width:px;height:px; 比如： width:1200px; height:800px; 但是这种方法在不同尺寸的电脑上就无法完全显示div或者div不能充满整个页面。 方法2：设置div的width:%;height:%;** 比如： width:20%; height:60...
float垂直不对齐的问题
weilikk的博客
12-26 1234
今天修改界面，要给一个div添加一个按钮，在右侧。html代码如下 &lt;div class="myPanel"&gt; &lt;span&gt;我的面板&lt;/span&gt; &lt;input name="input" type="button" class="arrowUp" value=" &qu
css3蒲公英飘动效果_css3 云朵飘动效果动画_html/css_WEB-ITnose
最新发布
05-24
您好！以下是CSS3实现蒲公英飘动效果和云朵飘动效果的示例代码： ## 蒲公英飘动效果 ```html <div class="dandelion"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="puff"></div> </div> ``` ```css .dandelion { position: relative; width: 100px; height: 100px; } .petal { position: absolute; width: 5px; height: 20px; border-radius: 5px; background-color: #f4d2a9; transform-origin: bottom center; animation-name: petal-float; animation-duration: 3s; animation-iteration-count: infinite; } .petal:nth-child(1) { left: 20%; transform: rotate(30deg); animation-delay: 0.2s; } .petal:nth-child(2) { left: 40%; transform: rotate(-30deg); animation-delay: 0.3s; } .petal:nth-child(3) { left: 60%; transform: rotate(30deg); animation-delay: 0.4s; } .petal:nth-child(4) { left: 80%; transform: rotate(-30deg); animation-delay: 0.5s; } .petal:nth-child(5) { left: 50%; transform: rotate(0deg); animation-delay: 0.6s; } .puff { position: absolute; bottom: 0; left: 40%; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px #fff; animation-name: puff-float; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes petal-float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes puff-float { 0% { transform: translateY(0); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0); } } ``` ## 云朵飘动效果 ```html <div class="cloud"></div> ``` ```css .cloud { position: absolute; top: 50px; left: -100px; width: 150px; height: 80px; border-radius: 50px; background-color: #fff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); animation-name: cloud-float; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes cloud-float { 0% { transform: translateX(-100px); } 50% { transform: translateX(300px); } 100% { transform: translateX(-100px); } } ``` 希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值