javascript - CSS，显示不同大小的 block

Question

我得到了主 block ，例如它是 400px， 在这个街区我可能有很多街区，我有 3 种情况 我需要在 1 行上显示分数。

1) 当我得到 100% - 它应该在绿色方 block 的 Angular 落里

2) 当它变小的时候，Percentages 应该有"margin-left: 15px "to text，不知道，怎么解释

3) 当它是例如 50% 时，它应该在栏之后

主要问题是，所有文本都应该在这个背景中，在此之后我将添加将关闭和打开 Teams 的 onClick 函数(您将在演示中看到)，因此这个包含所有背景的 block 将接收 onClick，所以这个 block 中的所有 DIV 都有背景

https://codepen.io/anon/pen/pWXaej

class Application extends React.Component {

    percentsToPx ( score ) {
        return score *4
    }

    render() {
        const examples = [
            {
                name: 'Example 1',
                score: 100,
                teams: [ { name: 'Example 1' }, { name: 'Example 1' }, { name: 'Example 1' } ]
            },
            {
                name: 'Example 2',
                score: 55,
                teams: [ { name: 'Example 2' }, { name: 'Example 2' }, { name: 'Example 2' } ]
            },
            {
                name: 'Example 1',
                score: 4,
                teams: [ { name: 'Example 3' }, { name: 'Example 3' }, { name: 'Example 3' } ]
            }
        ]
        return <div className='project'>
            {examples.map( ( it, index) => {
                const size = this.percentsToPx( it.score)
                return (
                    <div className='projectTab'>
                        <div style={{ display: 'inline-block' }}>
                            <div style={{ width: size, background: 'green', display: 'inline-block' }} className='projectBlock'>
                                <div className='projectText'>
                                    <h1 className='projectTextMain'>{it.name}</h1>
                                    <div>
                                        {it.teams.map( ( team, index ) => {
                                            return (
                                                <div style={{ marginLeft: 20 }} key={index}>
                                                    <h2 style={{
                                                        color: 'black',
                                                        whiteSpace: 'nowrap',
                                                        cursor: 'default'
                                                    }}>{team.name}</h2>
                                                </div>
                                            );
                                        } )}
                                    </div>
                                </div>
                            </div>
                            <div style={{ width: it.score, display: 'inline-block' }}></div>
                        </div>
                        <h2 className='projectTextPercents'>{it.score}%</h2>
                    </div>)
            })}
        </div>;
    }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

我想做什么 我拥有的

和样式

.projects {
    display: flex;
    width: 400px;
    flex-direction: column;
    align-items: stretch;
    margin-top: 10px;

&-tab {
        border-top: 1px solid grey;
    &:hover {
            background: white;
        }
    &:last-child {
            border-bottom: 1px solid grey;
        }
    }

&-block {
        display: flex;
        align-items: baseline;
    }

&-text {
        display: inline-block;
        minHeight: 100%;
        height: 100%;
        margin-left: -10px;

    &-main {
            color: black;
            white-space: nowrap;
            display: inline-block;
            cursor: default;
            margin-left: 30px;
        }

    &-percents {
            display: inline-block;
            color: grey;
            margin-left: 10px;
            vertical-align: top;
            cursor: default;
        }
    }
}

感谢您的帮助

Answer 1

我建议采用以下方法:如我所见，您生成元素的宽度并将其放在标记中。因此，您还可以为具有基于元素宽度的值的元素生成一个属性(比方说 data-w)。然后你可以通过 css 定位这些元素。在这种情况下，您还需要在服务器端为宽度不等于 100% 的情况生成一些小样式:

div {
    padding: 10px;
    border: 1px solid green;
    min-height: 38px;
    color: white;
    background-color: orange;
    margin: 10px 0px;
    position: relative;
    box-sizing: border-box;
}
div[data-w="full"]:after {  
    position: absolute;
    top: calc(50% - 8px);
    white-space: nowrap;
    right: 5%;
    content: '100%';
}
/* -- Generate the corresponding styles on the server-side and put them right in the markup for every item with width not equal to 100% -- */
div[data-w="average1"]:after {
  position: absolute;
  top: calc(50% - 8px);
  white-space: nowrap;
  color: black;
  right: -45px;
  content: '50%';
}
div[data-w="average2"]:after {
  position: absolute;
  top: calc(50% - 8px);
  white-space: nowrap;
  color: black;
  right: -45px;
  content: '47%';
}
div[data-w="small"]:after {
  position: absolute;
  top: calc(50% - 8px);
  white-space: nowrap;
  color: black;
  right: -115px;
  content: 'example 3 16%';
}
/* -- End of note -- */

<div data-w="full" style="width: 300px">example 1</div> 
<div data-w="average1" style="width: 150px">example 2.1</div>
<div data-w="average2" style="width: 140px">example 2.2</div>
<div data-w="small" style="width: 50px"></div>