Tôi tin rằng có một số giải pháp 'workaround' cho vấn đề của bạn, vì vậy tôi sẽ đưa ra một số ý tưởng của tôi, có thể nó sẽ giúp bạn một chút.
Idea 1: Vị trí tuyệt đối và một bó: thứ n con selectors
Để làm cho .item có tương đối rộng của họ để .list wrapper, bạn có thể vị trí tuyệt đối các mặt hàng này, và thiết lập .list wrapper để vị trí tương đối, sao cho chiều rộng .item sẽ được tính toán dựa trên chiều rộng .list.
Các sự sụp đổ lớn của ý tưởng này sẽ là bạn phải xác định vị trí các yếu tố bên cạnh nhau, như sử dụng left bất động sản, nhưng đi qua nó như một vòng lặp:
- mục đầu tiên sẽ để lại: 0;
- mục thứ hai sẽ còn lại: 50%;
- mục thứ ba sẽ còn lại: 100%;
- và vân vân ... + 50% cho các mục tiếp theo
Bạn có thể đổ vào một loạt các: nth-con (n), mỗi với + 50% prop trái. từ mỗi khác, HOẶC sử dụng một số công cụ sass để làm cho nó nhanh hơn.
Kiểm tra các demo here & sass demo here
*,
*: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>
Idea 2: Màn hình: flex
Sử dụng display: flex trên .wrapper, sẽ cho phép bạn có chiều rộng của .item liên quan đến ông bà của họ.
Các sự sụp đổ lớn của ý tưởng này sẽ là chiều rộng của .list phần tử, sẽ được ghi đè bởi độ rộng của .wrapper, không có vấn đề nếu bạn chỉ định hay không. Tuy nhiên, không phải tất cả bị mất, nếu bạn cần chiều rộng cụ thể cho một số kiểu dáng, bạn có thể chỉ định nó và sử dụng một số lớp giả với width: inherit, vì vậy chúng sẽ kéo dài đến bất kỳ chiều rộng nào bạn đã chỉ định ở địa điểm đầu tiên.
Kiểm tra các demo here
*,
*: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>
Child mất width% từ cha mẹ cha mẹ
bạn muốn một cái gì đó như thế này http://jsfiddle.net/6o8t9t8L/7/ –
li.item sẽ có chiều rộng 1000 thay vì 50 như mong đợi – Peeter