बाल माता पिता माता पिता से चौड़ाई% ले

Question

सीएसएस के साथ निम्नलिखित परिणाम संभव है:

ताकि li.item div.wrapper की चौड़ाई, नहीं ul.list का 50% लेता है (जो extremly लंबा है) । मैंने मूल सेटअप का एक स्निपेट जोड़ा है। इस मामले पर किसी भी विचार की सराहना की जाती है (कृपया ध्यान रखें कि मैं सीएसएस विकल्पों की तलाश में हूं)। एक 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

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

Answer 2

मेरा मानना ​​है कि आपकी समस्या के लिए कुछ 'वैकल्पिक हल' समाधान देखते हैं, तो में मेरे विचारों में से कुछ, शायद यह तुम बाहर एक सा मदद मिलेगी मैं डालना होगा।

आइडिया 1: स्थिति निरपेक्ष और का एक समूह: n वें वाले बच्चे चयनकर्ताओं

आदेश .item.list आवरण के लिए, आप निरपेक्ष स्थिति इन मदों कर सकते हैं उनके चौड़ाई रिश्तेदार है बनाने के लिए, और करने के लिए .list आवरण सेट स्थिति संबंधित, ताकि .item चौड़ाई की गणना .list चौड़ाई के आधार पर की जाएगी।

इस विचार के प्रमुख पतन होगा आप left संपत्ति का उपयोग कर, लेकिन एक पाश की तरह इसे पारित की तरह, प्रत्येक के बगल में इन तत्वों की स्थिति के लिए है कि:

• पहला आइटम छोड़ दिया जाएगा: 0;
• दूसरा आइटम छोड़ा होगा: 50%;
• तीसरा आइटम शेष होगा: 100%;
• और इतने पर ... अगले आइटम

आप या तो का एक समूह में डाल सकते हैं करने के लिए + 50%: n वें वाले बच्चे (एन), + 50% बाईं प्रोप के साथ प्रत्येक। एक दूसरे से, या कुछ sass सामग्री का उपयोग तेज़ी से करने के लिए करें।

चेक बाहर 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>

आइडिया 2: प्रदर्शन: फ्लेक्स

पर display: flex का उपयोग करना, आपको अपने दादा के सापेक्ष होने के लिए .item की चौड़ाई रखने की अनुमति देगा।

इस विचार के प्रमुख पतन होगा कि .list तत्व की चौड़ाई, .wrapper, कोई फर्क नहीं पड़ता की चौड़ाई से ओवरराइट किया जाएगा अगर आप इसे नहीं तैयार करें या। हालांकि, सभी खो गए नहीं हैं, अगर आपको कुछ स्टाइल के लिए उस विशिष्ट चौड़ाई की आवश्यकता है, तो आप इसे निर्दिष्ट कर सकते हैं, और width: inherit के साथ कुछ छद्म वर्गों का उपयोग कर सकते हैं, ताकि वे पहले स्थान पर निर्दिष्ट चौड़ाई तक पहुंच जाएंगे।

चेक बाहर 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>