gpt4 book ai didi

javascript - 将 div 中的多个跨度之一水平居中

转载 作者:太空狗 更新时间:2023-10-29 14:15:53 29 4
gpt4 key购买 nike

我有一个 css 问题需要更改。最好用图像描述的一个。 enter image description here

确切的定义。我有一个 div,里面有多个内联 div。我想为其中一个(黄色的)设置一个类以将其居中并相应地在一行中移动其余的(外部 div 已 overflow hidden )如果我从右边的黄色制作第二个,它将居中并在那里将是左侧的三个,然后是它(居中)和右侧的一个。我希望我说清楚了。我知道这可以用 javascript 来完成,但一切都很流畅,因此稍后在调整整个页面大小时会引入几个问题。

感谢帮助。

谢谢,彼得

最佳答案

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

健康建议:使用 JavaScript 完成此类任务,否则你可能会发疯。

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

你需要知道的变量是:

  • 列表中有多少项
  • 应该突出显示哪个元素

两者都可以用CSS来解决。


限制:

  • 每个列表计数都必须用 CSS 写下来;所以如果你有一个 slider ,它可能包含三到一百个元素,你必须编写 CSS 98 次。
  • 不适用于内部包装器内的 float 元素(通常设置 slider 的方式)——你不能翻译内部包装器,因为没有办法知道一个元素有多少个子元素——因此你不知道向左或向右翻译多远。您只能直接处理单个元素(因为可以计算 sibling )。

知道这一点后,您无法通过为目标元素(应该突出显示的元素)设置类名来移动一行元素,但您可以通过在父容器上使用类名来实现。


示例标记:

<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 */

我准备了一个示例,它可以连续处理两到六个元素。如果您的 slider 可能包含更多元素,您必须相应地扩展 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(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%;
}
<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>

关于javascript - 将 div 中的多个跨度之一水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31382636/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com