孩子从父母父母那里获取宽度%

Question

使用CSS可以得到以下结果:

所以li.item占用div.wrapper宽度的50%,而不是ul.list(这是极长的).我添加了一个基本设置的片段.关于此事的任何想法都表示赞赏(请记住我正在寻找CSS选项).一个jsfiddle游乐场链接:http://jsfiddle.net/6o8t9t8L/

.wrapper {
    width: 400px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid black;
}
.list {
    list-style-type: none;
    border: 1px solid red;
    width: 2000px;
}
.item {
    display: inline-block;
    height: 200px;
    width: 50%;
    border: 1px solid green;
}

<div class="wrapper">
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

Answer 1

我相信你的问题有一些' 解决方法 '的解决方案,所以我会倾注我的一些想法,也许它会帮助你一点点.

想法1:绝对定位和一堆:n-child选择器

为了使.item它们的宽度相对于.list包装器,您可以绝对定位这些项目,并将.list包装器设置为相对位置,以便根据.item宽度计算.list宽度.

这个想法的主要缺点是你必须将这些元素放在每个元素旁边,比如使用left属性,但是像循环一样传递它:

• 第一项将离开:0;
• 第二项将离开:50%;
• 第三项将离开:100%;
• 等等... + 50%到下一个项目

你可以倒入一堆:nth-​​child(n),每个都有+ 50%左支柱.彼此之间,或使用一些sass的东西,使它更快.

在这里查看演示和sass演示

*,
*:after,
*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 400px;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 1px solid black;
  /*make the grandparent, .wrapper, relative, so that the grandchilds, .item, 
    will calculate their width based on this width*/
  position: relative;
}
.list {
  list-style-type: none;
  border: 1px solid red;
  width: 2000px;
  margin: 50px 0;
  padding: 0;
  /*since everyone has position absolute, theres no content flow, so a fixed height
    has to be supplied*/
  height: 200px;
}
.item {
  width: 50%;
  border: 1px solid green;
  position: absolute;
  left: 0;
  /*you can set a height here, or position them like I did bellow*/
  top: 51px;
  bottom: 51px;
}
/*now the fun part starts
somehow these .items have to have left: +50% for each of them, like a loop somehow,
so you can either pour in a lot of nth-child(), for how many children you think this
list is going to have, or use sass to write it faster like i did here: 
*/

.item:nth-child(1) {
  left: 0;
}
.item:nth-child(2) {
  left: 50%;
}
.item:nth-child(3) {
  left: 100%;
}
.item:nth-child(4) {
  left: 150%;
}
.item:nth-child(5) {
  left: 200%;
}
.item:nth-child(6) {
  left: 250%;
}
.item:nth-child(7) {
  left: 300%;
}
.item:nth-child(8) {
  left: 350%;
}
.item:nth-child(9) {
  left: 400%;
}
.item:nth-child(10) {
  left: 450%;
}
.item:nth-child(11) {
  left: 500%;
}

<div class="wrapper">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

想法2:显示:flex

使用display: flexon .wrapper,将允许您具有.item相对于其祖父母的宽度.

这个想法的主要缺点是.list元素的宽度将被宽度覆盖.wrapper,无论你是否指定它.但是,并非所有都丢失,如果您需要某些样式的特定宽度,您可以指定它,并使用一些伪类width: inherit,因此它们将扩展到您在第一个位置指定的任何宽度.

在这里查看演示

*,
*:after,
*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 400px;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 1px solid black;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*bring on the awesomeness*/
  margin: 20px;
}
.list {
  list-style-type: none;
  /*border: 1px solid red;*/
  /*you can keep this defined width, items will calculte their width
    based on .wrapper class, wich will overwrite this classes width,
    however if you have some use for this width, consider using :after, :before
    classes like I did bellow, with .list:before*/
  position: relative;
  z-index: 1;
  width: 2000px;
  white-space: nowrap;
  margin: 20px 0;
  padding: 0;
  font-size: 0;
  /*display inline block extra spacing ....*/
}
.list:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  /*it will inherit the width you set above*/
  border: 1px solid red;
}
.item {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 50%;
  border: 1px solid green;
  font-size: 16px;
  /*bump back the font-size*/
}

<div class="wrapper">
  <ul class="list">
    <li class="item">a</li>
    <li class="item">b</li>
    <li class="item">c</li>
    <li class="item">d</li>
  </ul>
</div>

Answer 2

<div class="wrapper">
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

.wrapper {
    width: 400px;
    border: 1px solid black;
}
.list {
    list-style-type: none;
    border: 1px solid red;
    width: 400px;
    display: block;
    white-space:nowrap; 
    padding: 0;
    margin: 0;
}
.item {
    display: inline-block;
    height: 200px;
    width: 47%;
    border: 1px solid green;
    padding: 1%;
}

http://jsfiddle.net/btsewL9v/ 我会建议这样的事情..

编辑： 我不知道您想在列表中塞入多少项目，但请看一下： http ://lea.verou.me/2011/01/styling-children-based-on-their-带有 css3 的数字/