suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann ich diese Divs in dieselbe Zeile einfügen?

Ich habe eine Webseite mit Themen und möchte vier Themen pro Zeile haben. Ich habe 4 Dummy-Themen platziert, aber sie sind in einer Spalte auf der linken Seite statt in einer Zeile wie folgt angeordnet:

Dies ist der CSS-Code, den ich verwende:

.Topic{
  text-align: center;
  width: 20%;
  background-color: #F2EECB;
  margin: 2%;
}

.Topics{
  background-color: red;
  display: grid;
  gridTemplateColumns: auto auto;
}

Dies ist der JSX-Code, den ich zum Rendern des Themas verwende:

function Topics(){

var TopicsList = TopicsDB.map(topic => 
    <div className="Topic" style={divStyles}>
        <h2> {topic.Name} </h2>
    </div>
    )


return <div className="Topics">
        {TopicsList}
        </div>
        }

Wobei Topics das rote übergeordnete Div ist und Topic jedes Thema ist.

Versucht, eine andere Rasteranzeige und Spaltenanordnung zu verwenden, ohne Erfolg.

P粉860897943P粉860897943229 Tage vor388

Antworte allen(1)Ich werde antworten

  • P粉520545753

    P粉5205457532024-04-04 00:33:48

    div {
      outline: 2px dashed blue;
      display: inline-block;
      
      height: 48px;
      width: 56px;
    }

    Antwort
    0
  • StornierenAntwort