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

Question

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信有一些＆＃39; 解决方法＆＃39;解决你的问题的方法，所以我会提出一些想法，也许会对你有所帮助。

想法1：定位绝对和一堆：第n个孩子选择器

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

这个想法的主要垮台是你必须将这些元素放在每个元素旁边，比如使用.list属性，但是像循环一样传递它：

• 第一项将离开：0;
• 第二项将离开：50％;
• 第三项将离开：100％;
• 依旧...... + 50％到下一个项目

你可以倒入一堆：nth-​​child（n），每个都有+ 50％左支柱。相互之间， OR 使用一些 sass 的东西来加快速度。

查看 demo here ＆amp;的 sass demo here

＆＃13;

＆＃13;

left

＆＃13;

*,
*: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%;
}

＆＃13;

＆＃13;

＆＃13;

构思2：显示：flex

在<div class="wrapper"> <ul class="list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </div>上使用display: flex，可以让.wrapper的宽度相对于祖父母。

这个想法的主要垮台是.item元素的宽度将被.list的宽度覆盖，无论你是否指定它。 然而，并非全部丢失，如果您需要某些样式的特定宽度，您可以指定它，并使用一些.wrapper的伪类，因此它们会延伸到任何你在第一时间指定的宽度。

查看demo here

＆＃13;

＆＃13;

width: inherit

＆＃13;

*,
*: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*/
}

＆＃13;

＆＃13;

＆＃13;

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-number-with-css3/