Question

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]

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

我是否可以使用最具侵入性的CSS / HTML选项来显示正确的顺序？

Answer 1

编辑：我错过了关于你需要活动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();
})

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

1 个答案: