gpt4 book ai didi

css - 如何在不翻转 float 项和更改源顺序的情况下使用 float ?这可能吗?

转载 作者:技术小花猫 更新时间:2023-10-29 11:29:15 24 4
gpt4 key购买 nike

看这个例子就明白了

http://jsbin.com/ocewu

alt text http://easycaptures.com/fs/uploaded/212/8042227539.png

这是示例代码

<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }

div {width:300px;height:42px;border:2px solid red}
a{border:2px solid blue;padding:10px}
div a {float:right}
#div2 a {float:left}

</style>
</head>
<body>

I need positioning in right like this

<p>div a {float:right}</p>

<div >
<a>A</a>
<a>B</a>
</div>

but element order like this without changing in HTML code

<div id="div2">
<a>A</a>
<a>B</a>

</div>

最佳答案

混合一个额外的 Div?

如果您可以编辑您的 CMS 模板,将它们包装在一个额外的 div 中,然后 float 该 div:http://jsbin.com/esoqe

div.els { float:right }

<div class="main">
<div class="els">
<a>A</a>
<a>B</a>
</div>
</div>

JQuery 修复一切

如果您不能对代码进行像这样的微小更改,您可以在页面加载完成后使用 Javascript 重新排序。

$(function(){
// create previous hierarchy
$("div.main").wrapInner("<div class='els'></div>");
});

绝对位置 - 糟糕。

最后一个选项(我什至不敢称之为选项)是绝对定位每个 div,确保将它们的父容器位置设置为 relative*。此选项将要求您在每次添加新框时返回并更改您的 .css 文件,这很不幸。

* 如果您不能为其父级或具有相同尺寸的父级设置规则,则此选项将从表中删除,因为绝对定位将默认为视口(viewport),这不是您想要的。

关于css - 如何在不翻转 float 项和更改源顺序的情况下使用 float ?这可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2049608/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com