AMcoder - javascript, python, java, html, php, sql

Հեռացնել լուսանցքի պատասխանող մանրապատկերների ցանցը

Ես ստեղծում եմ մանրապատկերների ցանց, որն ունի արձագանքող 4-3-2-1 սյունակի կառուցվածք՝ 25%, 33,33%, 50%, 100%: Բայց ես ուզում եմ, որ կարողանամ հեռացնել յուրաքանչյուր մանրապատկերի վերջին լուսանցքը յուրաքանչյուր նահանգում՝ 4 սյունակով (25%,25%,25%,25%) կամ 3 սյունակով (33.33%, 33.33%, 33.33%) և այլն: Այժմ: վերջին մանրապատկերը ցատկում է մյուս մանրապատկերների տակ: Ես փորձում էի սրա համար օգտագործել :nth-child:

Ո՞րն է մանրապատկերների ցանց կառուցելու լավագույն միջոցը div-ներով, չդասավորված ցուցակներով (ul) կամ գուցե մեկ այլ բանով:

Որևէ մեկը կարո՞ղ է ինձ օգնել այս հարցում: Շնորհակալություն ;-)

Ահա օրինակ.

Ջութակ

or

Codepen

.thumb:nth-child(4n) {
margin-right: 0;}
html css css-selectors thumbnails
16.01.2015

  • Ձեր խնդիրն այն է, որ չափն ավելանում է մինչև 100%-ից ավելի, քանի որ width-ը վերաբերում է տուփի պարունակությանը, չի ներառում լիցք և երբեք չի ներառում լուսանցք: Սկզբում օգտագործեք box-sizing: border-box և padding margin-ի փոխարեն .thumb-ում: Սա դարձնում է լայնությունը, օրինակ. 25%-ը ներառում է լիցք: Դրանից հետո փորձեք տեսնել, թե ինչպես է Bootstrap-ն իրականացնում իր ցանցը, այս մասին հիանալի հոդված է helloerik.com/ 16.01.2015
  • Փորձելու եմ նախ դա, շնորհակալություն: 16.01.2015

Պատասխանները:


1

Տարբերակ 1

Օգտագործեք տուփի չափսերը: Փոխեք ձեր margin-ը padding-ի և օգտագործեք box-sizing: border-box;-ը ձեր .thumb-ի վրա: Սա նշանակում է, որ այն հաշվի կառնի լիցքը և եզրագիծը տոկոսային լայնությունները դնելիս:

JSFIDDLE

Տարբերակ 2

Օգտագործեք calc: Օրինակ:

.thumb {
   width: calc(50% - 20px);
}

JSFIDDLE

Ես թույլ կտամ ձեզ որոշել, թե որն է ավելի լավ ձեզ համար՝ բրաուզերի աջակցության հիման վրա: :)

Թարմացնել

Աջ կողմի լուսանցքից ազատվելու համար կարող եք օգտագործել nth-child, մի տեսակ ինչ եք առաջարկել.

@media all and (max-width: 800px) and (min-width: 601px) {
    .thumb {
        width: 50%;
    }
    .thumb:nth-child(2n+0) {
        padding: 0 0 20px 10px;
    }
}

Տե՛ս ներքևի օրինակը այս էջում:

JSFIDDLE

16.01.2015
  • Շնորհակալություն օգնության համար, բայց 4-րդ մանրապատկերում դեռ ճիշտ լուսանցք կա :-) 16.01.2015
  • Հնարավոր է, որ դուք կարող եք փոխել ձեր լիցքը :0 10px 20px 10px;ի, թե՞ այն դիպչել երկու եզրերին բացարձակ պարտադիր է: 16.01.2015
  • Թարմացված պատասխան՝ ավելորդ լիցքից/մարժայից ազատվելու համար 16.01.2015
  • Շնորհակալություն Ջեյմիին օգնելու համար, բայց ես պարզապես ուզում եմ մաքուր մանրապատկերների ցանց՝ 500x310 հարաբերակցությամբ և 20px լուսանցքով նրանց միջև և արձագանքող 4,3,2,1 և այլն, բայց ես նաև չեմ ուզում օգտագործել լիցք, քանի որ ուզում եմ ցույց տալ պատկեր։ կրող (օրինակ՝ ֆոնի գույնը կարմիր)՝ դրա վրա բեռնիչով, նախքան պատկերները նույն չափսերով բեռնված լինեն: Հուսով եմ, որ հասկանում եք, բայց հիմա լցոնումը պատկերից դուրս է, և նաև մանրապատկերների միջև եղած տարածությունը նույնը չէ, երբ նրանք ծրագրային ապահովում են կառուցում, այնպես որ ես պարզապես կարող եմ արագ ձևավորել, դա այնքան դժվար է աշխատել, և սա միայն սկիզբն է: հիասթափեցնող! 16.01.2015
    • Նոր նյութեր
    Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
    JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...
    Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
    Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..
    Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
    Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..
    Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
    Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..
    C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
    C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...
    Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
    Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..