Question

我得到了主要的块，例如400px，在这个块我可以有很多块，我有3种情况我需要在1行显示得分。

1）当我得到100％时 - 它应该在绿色区块的角落

2）当它的小尺寸时，百分比应该有“margin-left：15px”到文字，不知道，如何解释

3）当它是例如50％时它应该在栏之后

主要问题，所有文字都在这个背景下，在此之后我将添加onClick功能，将关闭并打开团队（这将在演示中看到），所以这个具有所有背景的块将重新点击onClick，所以此块中的所有DIV都带有背景

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

我建议采用以下方法：正如我所看到的，你会产生元素＆＃39;宽度并将其放在标记中。因此，您还可以为元素生成一个属性（比如说data-w），其值基于元素的宽度。然后你可以通过css定位这些元素。在这种情况下，您需要在服务器端生成一些小样式以及宽度不等于100％的情况：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS，显示不同大小的块

1 个答案: