我有一个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>