保留混合浮动元素的视觉顺序

Preserve visual order of mixed floated elements

本文关键字：视觉 顺序 元素 混合 保留      更新时间：2023-09-26

JSFiddle：https://jsfiddle.net/ttpkfs9s/

我有一个UI组件，它应该将元素排列成一行，并在左侧和右侧显示元素，活动元素位于中间：

[1][2][3] [4] [5][6][7][8][9]

到目前为止，我已经通过浮动元件left和right来实现这一点，同时将其中一个保持在float: none;中间(这已经足够好了(。

然而，在实现导航JS时为时已晚，我意识到我犯了一个巨大的错误，元素的实际显示顺序如下：

[1][2][3] [4] [9][8][7][6][5]

这是一个巨大的问题，因为这些元素应该是可点击的/掌上

有没有什么最多不太侵入性的CSS/HTML选项我可以用来获得正确的显示顺序？

EDIT：我错过了关于需要活动div始终位于行中心的部分。

您可以将div包含在一个容器中，并使容器浮动，但这可能很难做到

我随意改变了一下，也许你可以用，也许你不能。

我将所有项目设置为相同的宽度，并创建了一个函数，用于在单击其中一个项目后调整div的大小。

https://jsfiddle.net/ttpkfs9s/1/

html

<div class="row">
<div class="item left">1</div>
<div class="item left">2</div>
<div class="item left">3</div>
<div class="item left">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>

css

.row {
height: 150px;
background: blue;
width: 100%;
}
.item {
float: left;
padding: 2.5px;
color: white;
width: 9.4%;
height: 100%;
background: red;
margin: 0 0.3%;
box-sizing: border-box;
transition: 0.7s linear;
}
.active {
color: black;
background: yellow;
}

js

function setWidth(){
if($(".item").hasClass("active")){
    $(".item").width("6%");
    $(".active").width("40%");
};
}
$(".item").click(function(){
$(".item").removeClass("active");
$(this).addClass("active");
setWidth();
})
相关文章：