Проблемы с CSS файл

Это то, что я хочу иметь:Проблемы с CSS файл

Jake J. 
Matt D. 
Kate K. 
Matt H. ...

И вот мой код

renderNames(){ 
    const names =[ 
    "Jake J.", 
    "Matt D." 
    ... 
    ] 
    names.map((name,i) = > 
     return ( 
     <div><b className = 'b' + i>{name}</b></div> 
    ) 
    return names; 
}

У меня есть список из десяти имен, которые я хочу показать. То, что я хотел сделать, - создать 10 classNames b1, b2 ... и затем дать им все разные значения для верхнего и левого. Но я не думаю, что это такая хорошая идея, потому что, если я хочу что-то изменить в своем коде, мне придется вручную редактировать все значения. Таким образом, есть более красивый способ сделать это. Я использую Meteor + React + TypeScript + CSS.

Благодаря

источник

2016-06-23 DSDS

Что именно вы пытаетесь достичь с помощью левого и верхнего значений? Разве не хватит одного класса для детей и обертки для всех, в которых вы можете использовать дочерние селекторы и стилизовать их по мере необходимости? Или, может быть, даже лучшая идея была бы гибкой макетой, но нужно немного больше информации, чтобы быть в состоянии сказать. –

У меня есть раздел, и в этом разделе я хочу показать это 10 имен. Используя левый и верхний в файле css (ex left0: 50px top0: 50, затем для следующего top1: 50 + 50px и т. Д.) Я указываю позицию элемента. ps Я новичок в css – DSDS

Выполнение абсолютного позиционирования в списке кажется действительно странным. Вы просто делаете каждый элемент 50px высотой и позволяете им автоматически складываться. –

renderNames(){ 
    const names =[ 
    "Jake J.", 
    "Matt D." 
    ... 
    ] 
    names.map((name,i) = > 
     return ( 
     <p><b className='name'>{name}</b></p> 
    ) 

    return (
    <div className='container'> 
     {names} 
    </div>); 
}

Должно работать для вас. Затем в вашей таблице стилей вы можете ввести .container и .container .name.

источник

2016-06-23 21:23:52

Если это для стилей CSS, то я согласен с вашими проблемами. Знаете ли вы, что css selector nth-child? Я бы добавил className в родительский div. А затем в стилях сделайте что-нибудь вроде этого:

.parent:nth-child(0) { ... } 
... 
.parent:nth-child(9) { ... }

Тогда вы можете просто нарисовать свои предметы из css.

источник

2016-06-23 21:14:51

Проблемы с CSS файл

ответ

Смежные вопросы