Реактивная высота тега div равна нулю, несмотря на наличие содержимого, - PullRequest
Новая
       12

Реактивная высота тега div равна нулю, несмотря на наличие содержимого,

0 голосов
/ 03 апреля 2020

В моем проекте у меня есть тег класса Pokedex , который содержит некоторые компоненты Pokecard (видимые на pi c), однако высота тега div всегда равна нулю, только после установки это в CSS как fe height = 1000px; высота правильно установлена. См., Например, экраны Problem Ilustration

Мой код: CSS: 

.Pokecard img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.Pokecard p {
  text-align: center;
  margin: 3px;
}

.Pokecard {
  border: 1px solid black;
  width: 20%;
  max-width: 180px;
  min-width: 100px;
  border-radius: 10px;
  padding: 10px;
  background-color: rgb(235, 199, 238);
  float: left;
  margin: 2%;
}


.Pokedex {
  margin: auto;
  max-width: 700px;
  width: 95%;
  background-color: cornsilk;
  height: max-content;
}

Компонент Pokedex: 

  myProps = this.props.prokeList;
  render() {
    return (
      <div className="Pokedex">
        {[...this.myProps].map((e, index) => {
          return (
            <Pokecard
              key={`pk_${index}`}
              name={e.name}
              id={e.id}
              baseExperience={e.base_experience}
              type={e.type}
            />
          );
        })}
      </div>
    );
  }
}

Компонент Pokecard 

class Pokecard extends React.Component {
    render() {
        return (
            <div className="Pokecard">
                <h3>{this.props.name}</h3>
                <img 
                src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/' +
                `sprites/pokemon/${this.props.id}.png`} alt={this.props.name}/>
                <p>Type: {this.props.type}</p>
                <p>EXP: {this.props.baseExperience}</p>
            </div>
        )
    }    
}

Почему это происходит, я вижу в браузере инспектора, что div.Pokedex содержит компоненты, но имеют высоту 0px?

решено Обращаясь к ответу Данко, я добавил это исправление к моему CSS: 

.Pokedex::after {
  content: "";
  clear: both;
  display: table;
}

1 Ответ

2 голосов
/ 03 апреля 2020

Ваш родительский элемент разрушен, потому что дочерние элементы являются числами с плавающей точкой. Используйте clearfix.

...