javascript – 在div horizo​​ntaly中的众多跨度中的一个

我有一个css问题需要改变.最好用图像描述的一个.

确切的定义.我有一个内部有多个内联div的div.我想将一个类设置为其中一个(黄色一个)以使其居中并相应地将其余部分移动到一行中(div外部隐藏溢出)如果我从右边的黄色中取出第二个,它将会居中并且在那里将是左侧的三个,然后是它(居中),一个在右侧.我希望我说清楚.我知道它可以用javascript完成但是一切都很流畅,所以稍后会在重新调整整个页面大小时引入一些问题.

帮助赞赏.

谢谢,
彼得

解决方法

(tl;博士： http://jsfiddle.net/feeela/3eq8dcLc/)

健康建议：使用JavaScript执行此类任务,否则您可能会发疯.

话虽如此,我向您呈现一个流畅的CSS版本.

您需要知道的变量是：

>列表中有多少项
>应突出显示哪个项目

两者都可以在CSS中解决.

限制：

>每个列表计数必须写在CSS中;所以,如果你有一个滑块,可能包含三到百个项目,你必须写CSS 98次.
>不适用于内部包装器中的浮动项目(通常设置滑块的方式) – 您无法翻译内部包装器,因为无法知道元素有多少个孩子 – 因此您不能知道向左或向右平移多远.您只能直接处理单个项目(因为可以计算兄弟姐妹).

知道了这一点,你不能通过设置一个类名到目标项(应该突出显示的那个)来移动一行项,但你可以通过在父容器上使用类名来实现.

示例标记：

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

步骤1：

根据兄弟姐妹的数量将项目宽度设置为百分比.

有关其工作原理的说明,请参阅https://stackoverflow.com/a/12198561/341201和链接的资源.

/* two items */
.slider > ul li:first-child:nth-last-child(2),.slider > ul li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
.slider > ul li:first-child:nth-last-child(3),.slider > ul li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

第2步：

根据突出显示项目的位置和兄弟计数,使用正(向右移动)或负(向左移动)边距移动第一个项目.这是棘手的部分.

/* Second item
  Notes:
  - The second item of three is already in the middle
*/
.slider.item-2 > ul li:first-child:nth-last-child(2) {
    margin-left: -25%;
}
.slider.item-2 > ul li:first-child:nth-last-child(4) {
    margin-left: 12.5%;
}
.slider.item-2 > ul li:first-child:nth-last-child(5) {
    margin-left: 20%;
}
.slider.item-2 > ul li:first-child:nth-last-child(6) {
    margin-left: 25%;
}

/* Third item
  Notes:
  - No third item in a list of two
  - The third item of five is already in the middle
*/
.slider.item-3 > ul li:first-child:nth-last-child(3) {
    margin-left: -33.3333%;
}
.slider.item-3 > ul li:first-child:nth-last-child(4) {
    margin-left: -12.5%;
}
.slider.item-3 > ul li:first-child:nth-last-child(6) {
    margin-left: 8.3333%;
}

/* …expand as required up to N items */

我准备了一个连续两到六个项目的例子.如果滑块可能包含更多项目,则必须相应地扩展CSS.

完整示例：

(Also available as JS fiddle)

hr {
    /* visual sugar */
    margin-top: 5em;
    margin-bottom: 5em;
}

.slider {
    overflow: hidden;
}

.slider > ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    white-space: Nowrap;
}

.slider > ul li {
    Box-sizing: border-Box;
    display: inline-block;
    overflow: hidden;
    margin-left: -4px;
    min-height: 5rem;
    white-space: normal;
    border: 1px solid black;
}
.slider > ul li:first-child {
    margin-left: 0;
}

/* The following sections sets the slider item widths */

/* two items */
.slider > ul li:first-child:nth-last-child(2),.slider > ul li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
.slider > ul li:first-child:nth-last-child(4),.slider > ul li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

/* five items */
.slider > ul li:first-child:nth-last-child(5),.slider > ul li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}

/* six items */
.slider > ul li:first-child:nth-last-child(6),.slider > ul li:first-child:nth-last-child(6) ~ li {
    width: 16.6666%;
}

/* N items – expand as required… */



/* Highlight a specific item */
.slider.item-2 > ul li:nth-child(2),.slider.item-3 > ul li:nth-child(3),.slider.item-4 > ul li:nth-child(4),.slider.item-5 > ul li:nth-child(5),.slider.item-6 > ul li:nth-child(6) {
    background: yellow;
}


/* This sections centers a specific item */

/* Second item
  Notes:
  - The second item of three is already in the middle
*/
.slider.item-2 > ul li:first-child:nth-last-child(2) {
    margin-left: -25%;
}
.slider.item-2 > ul li:first-child:nth-last-child(4) {
    margin-left: 12.5%;
}
.slider.item-2 > ul li:first-child:nth-last-child(5) {
    margin-left: 20%;
}
.slider.item-2 > ul li:first-child:nth-last-child(6) {
    margin-left: 25%;
}

/* Third item
  Notes:
  - No third item in a list of two
  - The third item of five is already in the middle
*/
.slider.item-3 > ul li:first-child:nth-last-child(3) {
    margin-left: -33.3333%;
}
.slider.item-3 > ul li:first-child:nth-last-child(4) {
    margin-left: -12.5%;
}
.slider.item-3 > ul li:first-child:nth-last-child(6) {
    margin-left: 8.3333%;
}

/* Fourth item
  Notes:
  - No fourth item in a list of two and three
*/
.slider.item-4 > ul li:first-child:nth-last-child(4) {
    margin-left: -37.5%;
}
.slider.item-4 > ul li:first-child:nth-last-child(5) {
    margin-left: -20%;
}
.slider.item-4 > ul li:first-child:nth-last-child(6) {
    margin-left: -8.3333%;
}

/* Fifth item
  Notes:
  - No fifth item in a list of two,three and four
*/
.slider.item-5 > ul li:first-child:nth-last-child(5) {
    margin-left: -40%;
}
.slider.item-5 > ul li:first-child:nth-last-child(6) {
    margin-left: -25%;
}

/* Sixth item
  Notes:
  - No sixth item in a list of two,three,four and five
*/
.slider.item-6 > ul li:first-child:nth-last-child(6) {
    margin-left: -41.6666%;
}

<h3>Highlight second item</h3>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight third item</h3>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight fourth item</h3>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight fifth item</h3>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight sixth item</h3>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

原文地址：https://www.jb51.cc/js/157072.html