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

最新推荐文章于 2022-09-17 14:49:54 发布
最新推荐文章于 2022-09-17 14:49:54 发布
阅读量617 收藏
点赞数
文章标签： html调整div上下顺序

5268f80b9b1e01f982625ef6fac83ca1.png

先看代码

#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;

}

最快的方法就是：

#password_field{

float:right;

width:340px;

margin-top:24px;

}

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

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

用户名：

密码：

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

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

做生活的创作者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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布局...
[前端設計] 设置float:left后居然没有正确对齐？
weixin_30686845的博客
11-26 931
select { float:left; } 设置后并没有左对齐！？ 换一种思路解决了问题（但是为什么float:left有问题还不清楚） select { display:inline-block; } 转载于:https://www.cnblogs.com/jacky-dotnet/p/4122646.html...
ie浏览器float right 向下错位解决办法
weixin_30835649的博客
08-28 329
ie360 浏览器float right 向下错位解决办法span 当设置其float:right;时，其向下一行错位时最佳办法：将span移到所要显示的文字前面 其次办法：在span母容器的css里添加position:relative; 在span的css里添加position:absolute;right:0px;解决。 我选择第一种，搞定！ 转载ht...
带float属性的元素“脱标”后带来的盒子上移情况
weixin_70199091的博客
09-17 399
float属性的元素“脱标”后带来的盒子上移各种情况，进行归纳总结和实体演示。
html修改层的相对位置,css-相对定位-绝对定位-锁定-上下层-列表浮动
weixin_42395219的博客
06-04 415
css三种定位方式：普通定位如：框与框之间普通排列，浮动定位和绝对定位1.普通定位中的框排列display属性。实现块元素与行内元素互相转换如：默认：h1{background-color:orange;}span{background-color:red;}默认h1默认h1span|行内标签默认|spanspan|行内标签默认|spandisplay属性后：h1{background-color...
div+css静态html网页模板.rar_css网页_html CSS_html简单模板_troopsokc_静态网页 模板
09-21
在这个模板中，CSS可能会使用到盒模型（box model）来调整元素的边距和内填充，使用选择器（如class和id）来针对性地应用样式，以及使用浮动（float）或定位（positioning）来实现布局。 在CSS中，`div`元素常被...
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而改变
qq_34471916的博客
12-20 247
'<div class="item-desc">'+ '<div class="item-score">$wm_poi_score</div>'+ '<div class="item-count">月售$monthNum</div>'+ ...
float垂直不对齐的问题
weilikk的博客
12-26 1226
今天修改界面，要给一个div添加一个按钮，在右侧。html代码如下 &lt;div class="myPanel"&gt; &lt;span&gt;我的面板&lt;/span&gt; &lt;input name="input" type="button" class="arrowUp" value=" &qu
html中浮动上下居中,DIV+CSS垂直居中一个浮动元素
weixin_39555415的博客
07-01 366
场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。原始代码如下:.wrapper{width: 400px;height: 300px;background-color: #1f8dd6;}button{float: right;display: inline-block;height: 50px;width: 100px;line-height: 50px;}floa...
CSS浮动(float,clear)通俗讲解
Lv骚年
09-16 112
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：              可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。        注意，以上这些理论，是指标准流中的div。        无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元...
HTML标签中设置z-index上下层关系属性无效
My note
09-07 1365
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
html页面错位,css html网页错位原因解决方法
weixin_33193480的博客
06-03 1529
错位一3错位零落凋落与1与2下方错位二 网页机关错位树范造成DIV CSS网页机关错位的缘由可以有两种状况，一种是宽度计算差迟，一种是IE BUG形成，格外是IE6与IE7。往后我们挨着为人人介绍错位与妄想错位方法。一、宽度计算错误妄想方式宽度计算错误，要是总宽度为500px，有3个盒子，别离css宽度为200px、200px、100px，这个没问题可能在一排闪现不会错位，但如果问鼎了css边框...
HTML图片错位重叠,css html网页错位原因解决方法
weixin_29103027的博客
05-31 1502
(HTML)DIV+CSS网页错位的原因与解决方式每每咱们会碰着我们要设置装备摆设在一行显露的布局，却因为各种缘由组成为了错位，看到终归是在一行的结尾一个盒子组织错位掉下去了(如下图)。错位一3错位零落与1与2下方错位二 网页组织错位树模形成DIV CSS网页组织错位的起因笼统有两种状况，一种是宽度计算过失，一种是IE BUG形成，额定是IE6与IE7。然后咱们挨着为人人引见错位与操持错位方法。...
html元素高度错乱,float元素高度不一致导致错位怎么解决？
weixin_31782201的博客
07-12 745
当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象，下面与大家分享下当高度不一致时的解决方法。float元素高度不一致导致错位怎么解决？一、解决方法是给换行开始的第一个元素加上 clear:left; 即可。例如 四列时应该时第5个、9个...加clear:left;.row .col-lg-3:nth-child(4n+1),.row .col-md-3:nth...
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、付费专栏及课程。

余额充值