0
Ich versuche nur die Kamerasymbole oben direkt unter dem it's as easy as Titel auszurichten. Wenn ich jedoch die Menge an Text unter dem Titel vergrößere, drückt er die anderen Komponenten nach unten.Richten Sie die Symbole oben ohne Höhenversatz aus
<h2>Its As Easy As ...</h2>
<div style={{margin: '10px 0', display: 'inline-block'}}> //wrapper for all 3
// Icon with title component
<div style={{display: 'inline-block', margin: '20px 10px', width: '200px'}}>
<div style={{margin: '0 0 10px'}}>
<FontAwesome name="camera" size="4x"/>
</div>
<div>
<h3 style={{margin: '10px 0'}}>{title}</h3>
<div>{desc}</div>
</div>
</div>
...repeat 2 more for the others
</div>
ich in einem Text in dem desc Attribute bin vorbei und wenn der Text lang drückt er die anderen Komponenten nach unten.
Ich habe versucht, eine feste Höhe einzustellen, aber das erhöhte nur die Gesamthöhe der Komponenten.
Wie würde ich die Symbole so ausrichten, dass der Langtext im Feld desc die Höhe der anderen Komponenten nicht beeinflusst?
Sie sollten zum Beispiel in Verwendung eine ansprechende Gitter/Spalten aussehen zu lassen 'Bootstrap'. – Purgatory
Was haben reactjs damit zu tun? Wenn Sie das reactjs Zeug entfernen und das HTML und CSS alleine lassen, werden Ihnen wahrscheinlich mehr Leute helfen. – Rob
Mögliches Duplikat von [Wie Inline-Block-Elemente mit Höheneinstellung vertikal ausrichten und mit Browser-Tools testen] (https://stackoverflow.com/questions/20825655/how-to-vertical-align-inline-block-elements-with -high-set-and-test-mit-Brauen) – Rob