javascript - 保留混合 float 元素的视觉顺序

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

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

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

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

但是，实现导航JS太晚了，我意识到我犯了一个很大的错误，并且显示元素的实际顺序如下：

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

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

我最多可以使用任何侵入性不太强的CSS / HTML选项来使显示的顺序正确吗？

最佳答案

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

您可以将div包含在容器中，然后将容器浮动到insted中，但这可能很难做到。

我自由地进行了一些改变，也许您可以使用它，也许您不能。

我将所有项目设置为相同的宽度，并在单击项目之一后设置了用于调整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;
}

function setWidth(){
if($(".item").hasClass("active")){
    $(".item").width("6%");
    $(".active").width("40%");
};
}

$(".item").click(function(){
$(".item").removeClass("active");
$(this).addClass("active");

setWidth();
})

关于javascript - 保留混合 float 元素的视觉顺序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32866635/