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

时间：2015-07-13 11:52:00

标签： javascript html css

我有一个改变的CSS问题。最好用图像描述的一个。 enter image description here

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

帮助表示感谢。

谢谢， 彼得

3 个答案:

答案 0 :(得分：3)

（tl; dr：http://jsfiddle.net/feeela/3eq8dcLc/）

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

话虽如此，我向您展示了一个流畅的CSS版本。

您需要知道的变量是：

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

两者都可以在CSS中解决。

<强>限制：

  • 每个list-count必须写在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）

＆＃13;
＆＃13; 
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(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%;
}

/* 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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用转换的固定宽度子项的部分解决方案：

.container {
    width: 500px;
    padding: 5px;
    border: solid 2px black;
    overflow: hidden;
}
.slider {
    position: relative;
    width: 100%;
    text-align: right;
    transform: translate(-50%);
}
.slider div {
    display: inline-block;
    margin: 0 5px;
    transform: translate(50%);
    border: solid 1px black;
    width: 47px;
    height: 30px;
}

.slider div:last-child {
    background-color: yellow;
}

完整来源：https://jsfiddle.net/wh98dxav/2

答案 2 :(得分：1)

正如@Paulie_D在评论中提到的那样，如果由于缺少先前的兄弟选择器而将类添加到子元素中，那么你所追求的将是非常困难的（甚至可能是不可能的）。

然而，这可以通过将标识类放在父级上来稍微改变逻辑来实现。 结果有点冗长（并且只会在更多元素的情况下变得更糟）但允许基于添加单个类进行排序。

背后的逻辑：

  • 子元素绝对定位（相对于父元素），将它们从流中取出。这允许所选元素与中心对齐，但也意味着元素不知道它们周围元素的位置。因此，我们需要为每个兄弟元素编写规则
  • 所选元素使用left: 50%;和margin-left: -50px;（元素宽度的一半）居中
  • 其他子元素也使用left: 50%;定位，这会将元素的左边缘放在父元素的中间。然后，我们使用不同程度的margin-left来将它们与所选元素相对应

例如：

由于所选元素的宽度为100px，因此我们使用margin-left: -50px;将其置于中心位置。要在其左侧放置元素，我们会从100px制作width中扣除margin（元素的margin-left: -150px;）。要在其右侧放置元素，我们会将100px添加到制作margin的{​​{1}}。

以下示例使用jQuery只允许您切换类，定位全部使用CSS完成：

margin-left: -150px;
$("#parent").on("click", function() {
  //Credit to Denys Séguret for the class toggle http://stackoverflow.com/questions/14200833/jquery-toggling-between-3-classes-initially
  $(this).each(function() {
    var classes = ['one', 'two', 'three', 'four', 'five', 'six'];
    this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
  });
});
#parent {
  border: 1px solid #000000;
  height: 50px;
  margin: 5px 0;
  overflow: hidden;
  position: relative;
}
.child {
  background-color: #CCCCCC;
  left: 50%;
  height: 50px;
  position: absolute;
  top: 0;
  transition: all 1s;
  width: 100px;
}
.child:nth-child(odd) {
  background-color: #999999;
}
/*First .child selected*/
.one .child:nth-child(1) {
  background-color: yellow;
  margin-left: -50px;
}
.one .child:nth-child(2) {
  margin-left: 50px;
}
.one .child:nth-child(3) {
  margin-left: 150px;
}
.one .child:nth-child(4) {
  margin-left: 250px;
}
.one .child:nth-child(5) {
  margin-left: 350px;
}
.one .child:nth-child(6) {
  margin-left: 450px;
}
/*Second .child selected*/
.two .child:nth-child(1) {
  margin-left: -150px;
}
.two .child:nth-child(2) {
  background-color: yellow;
  margin-left: -50px;
}
.two .child:nth-child(3) {
  margin-left: 50px;
}
.two .child:nth-child(4) {
  margin-left: 150px;
}
.two .child:nth-child(5) {
  margin-left: 250px;
}
.two .child:nth-child(6) {
  margin-left: 350px;
}
/*Third .child selected*/
.three .child:nth-child(1) {
  margin-left: -250px;
}
.three .child:nth-child(2) {
  margin-left: -150px;
}
.three .child:nth-child(3) {
  background-color: yellow;
  margin-left: -50px;
}
.three .child:nth-child(4) {
  margin-left: 50px;
}
.three .child:nth-child(5) {
  margin-left: 150px;
}
.three .child:nth-child(6) {
  margin-left: 250px;
}
/*Fourth .child selected*/
.four .child:nth-child(1) {
  margin-left: -350px;
}
.four .child:nth-child(2) {
  margin-left: -250px;
}
.four .child:nth-child(3) {
  margin-left: -150px;
}
.four .child:nth-child(4) {
  background-color: yellow;
  margin-left: -50px;
}
.four .child:nth-child(5) {
  margin-left: 50px;
}
.four .child:nth-child(6) {
  margin-left: 150px;
}
/*Fifth .child selected*/
.five .child:nth-child(1) {
  margin-left: -450px;
}
.five .child:nth-child(2) {
  margin-left: -350px;
}
.five .child:nth-child(3) {
  margin-left: -250px;
}
.five .child:nth-child(4) {
  margin-left: -150px;
}
.five .child:nth-child(5) {
  background-color: yellow;
  margin-left: -50px;
}
.five .child:nth-child(6) {
  margin-left: 50px;
}
/*Sixth .child selected*/
.six .child:nth-child(1) {
  margin-left: -550px;
}
.six .child:nth-child(2) {
  margin-left: -450px;
}
.six .child:nth-child(3) {
  margin-left: -350px;
}
.six .child:nth-child(4) {
  margin-left: -250px;
}
.six .child:nth-child(5) {
  margin-left: -150px;
}
.six .child:nth-child(6) {
  background-color: yellow;
  margin-left: -50px;
}

https://jsfiddle.net/4tp9u7o0/2/

相关问题
最新问题