Wie wird dieses Segment in Semantic UI codiert? Ich habe versucht, Gitter zu verwenden, aber es hat leider nicht geklappt.
<div class="ui horizontal segments">
<div class="ui segment">
<div class="two column row">
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
<div class="ui segment">
</div>
</div>
Ich denke, das Plunkr passt mit dem, was Sie suchen
<div class="ui grid">
<!-- left part -->
<div class="eight wide column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<!-- right part -->
<div class="eight wide column"></div>
</div>
Grid auf zwei breite gleiche Spalten getrennt. In der rechten Spalte drei Zeilen, in der linken Spalte Ihr Inhalt.
Danke. Aber ich möchte, dass die Grenzen auch erscheinen. Und die Breite des rechten Teils ist etwas kleiner als die Breite des linken Teils. – APJ
Ich habe dir das Skelett gegeben. Ich werde dir nicht den vollen Code geben, weil es nicht so schwer ist, es zu machen. Sie müssen es selbst versuchen. – Zooly
Ich denke, mit einigen CSS und Semantic-Segmenten können Sie dies erreichen. Folgendes habe ich versucht. Entschuldigung für die Einrückung!
<div class="ui segments" style="width: 400px;float: left;">
<div class="ui compact horizontal segments">
<div class="ui segment" style="width: 100px;padding: 0;border-radius: 0px;">
<div class="ui segments" style="width: 200px;float: left;border: 0px;border-radius: 0px;border-right: 1px solid #eee;">
<div class="ui segment" style="border-bottom: 1px solid #eee !important;">
<p>Nested Top</p>
</div>
<div class="ui segment" style="border-bottom: 1px solid #eee!important; ">
<p>Nested Middle</p>
</div>
<div class="ui segment">
<p>Nested Bottom</p>
</div>
</div>
</div><div class="ui segment" style="width: 99px;background: #fff;"><p>Nested Horizontal</p> </div></div></div>
Bitte zeigen Sie uns, was Sie versucht haben, dies wird uns einen Punkt geben, um von beginnen. So wie es aussieht, möchten Sie, dass wir die ganze Arbeit für Sie erledigen, und StackOverflow ist KEIN Code-Schreibdienst. –
@JonP Ich habe meinen Code hinzugefügt. – APJ