Css浮动定位:css 浮动替代(alternatives to float css)

在我的 web 应用程序我有一个工具栏,它是一个 div:

div 有 3 个跨度。3 个跨度的内容稍后填充。

每个跨度的大小每次都不同。

<div>
    <span id="ab1" style="display: inline-block;"></span>
    <span id="ab2" style="display: inline-block;"></span>
    <span id="ab3" style="display: inline-block;"></span>
</div>

现在,我想,跨度“ab1”应该放在左边,“ab2”和“ab3”在右侧的 div。

这可能没有浮动右 / 左?

12
Useposition:absoluteandtext-align:right CSS
div{background:red; text-align:right; position:relative;}
#ab1{position:absolute; left:0; background:yellow;}
#ab2{background:yellow;}
#ab3{background:yellow;}
DEMO
10

您可以将display flex用于容器,将margin-left: auto用于 # ab2。

div{
    display: flex;
}
#ab2{
    margin-left: auto;
}
5

display:flex添加到父元素,并将margin-left:auto添加到任何子元素。
(该子元素和所有下一个子元素向右浮动)

div {
  display: flex;
  border: 1px solid green;
}
span {
  border: 2px solid red;
}
#ab2 {
  margin-left: auto; /* this and the next elements float to right */
}
<div>
  <span id="ab1">sometext 1</span>
  <span id="ab2">sometext 2</span>
  <span id="ab3">sometext 3</span>
</div>

或只显示一个元素的一面,添加更高的顺序,该元素

div {
  display: flex;
  border: 1px solid green;
}
span {
  border: 2px solid red;
}
#ab2 {
  margin-left: auto;
  order: 1; /* this becomes the last element, only this element float to right */
}
<div>
  <span id="ab1">sometext 1</span>
  <span id="ab2">sometext 2</span>
  <span id="ab3">sometext 3</span>
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(132)
Python绘制八边形代码:Javascript画布绘制一个八边形
下一篇

相关推荐

  • javascript判断题:JavaScript中的函数是如何定义的?

    示例示例判断题是指使用语言来实现一些逻辑判断的题目,主要是使用if语句来实现。例如:…

    2023-06-28 15:27:44
    0 33 73
  • css动画执行一次:Unlock Your Potential with CSS Animations

    CSS动画可以使元素在指定的时间内从一种样式变化到另一种样式。要实现CSS动画只执行一次,需要使用animation-iteration-count属性,该属性可以设置动画的重复次数。…

    2023-05-02 02:07:41
    0 15 28
  • javascript折叠菜单:使用方法

    javascript折叠菜单是指使用javascript实现的折叠菜单,它可以实现菜单的展开和折叠功能,以更好的帮助用户浏览网页。…

    2023-08-06 16:28:04
    0 14 62
  • javascript是java语言吗:JavaScript与Java之间的区别

    示例示例No,不是java语言。和Java是两种完全不同的编程语言,它们之间没有直接的联系。是一种轻量级的、跨平台的、弱类型的、基于原型的、多范式的编程语言,它的设计目的是为了使网页上的动态内容更容易创建和维护。…

    2023-05-17 04:31:38
    0 59 86
  • jquery 改变css: blue});

    示例示例jQuery 可以使用 css() 方法来改变 CSS 属性,其语法如下:$().css(, value);…

    2023-04-30 02:29:44
    0 86 64
  • css起源下载:Unlock the Power of CSS to Create Amazing Web Designs

    CSS(Cascading Style Sheets)是一种用来定义HTML文档的样式表语言。它可以让你使用样式属性来定义文档的外观,如字体、颜色、背景图像等。…

    2023-03-04 03:20:22
    0 14 69
  • javascript定义The Language of the Web

    示例示例是一种轻量级的脚本语言,它可以在浏览器中运行,用于添加动态效果到网页,以及创建更复杂的Web应用程序。下面是一个简单的代码示例,用于显示一个弹出框:…

    2023-04-07 12:46:01
    0 27 47
  • javascript警告框请注意您的输入!

    javascript警告框是一种浏览器弹出框,用于向用户显示一条警告信息。它可以帮助用户在网页中做出正确的选择,以避免出现不必要的错误。…

    2023-10-02 07:40:28
    0 59 52

发表评论

登录 后才能评论

评论列表(32条)