Wie werden zwei Spalten in HTML angezeigt?

Ich möchte 2 Spalten mit HTML (responsive) anzeigen. Die erste Spalte, der Name des Ereignisses, während die zweite Spalte die Zeit des Ereignisses ist. Wie gehe ich vor? Unten ist der Screenshot, den ich angehängt habe.Wie werden zwei Spalten in HTML angezeigt?

Quelle

2017-10-29 Sabrina Said

Verwenden Sie Vanille HTML oder ein CSS-Framework (Bootstrap, etc)? – AppleCrazy

Ich benutze Bootstrap, um dies zu entwickeln. –

Kann nicht verstehen, warum Sie nichts über Grid-Layout-System von Bootstrap wissen: http://getbootstrap.com/docs/4.0/layout/grid/ –

-2

Sie benötigen einen Tisch zu verwenden. So etwas wie dieses:

Quelle

2017-10-29 04:21:20

Ich denke, mit Tisch wird nicht reagieren, wenn er es braucht. –

Sie müssen einen Container erstellen, eine Zeile hinzufügen und zwei Spalten in dieser Zeile erstellen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     Column 1 
 
    </div> 
 
    <div class="col"> 
 
     Column 2 
 
    </div> 
 
    </div> 
 
</div>

mehr Lesen Sie über das Bootstrap Grid-System, einschließlich, wie Spalten, um die Größe, hier: https://getbootstrap.com/docs/4.0/layout/grid/

Quelle

2017-10-29 04:26:40 AppleCrazy

Sie haben das schließende Tag von '.row' vergessen. –

Es sollte nun – AppleCrazy

behoben werden, was ist dann mit dem ceret down icon neben der Spalte 2? Muss ich dafür auch eine neue Spalte hinzufügen? @AppleCrazy –

Sie können dies erreichen, indem Sie "Tabelle" tag:

<table> 
    <tr> 
    <td>column 1</td> 
    <td>column 2</td> 
    </tr> 
</table>

Quelle

2017-10-29 04:36:14

erstellen ein Behälter legte sie dann in die Säule. Die gesamte Breite eines Browsers ist gleich 12 Spalten, wenn Sie zwei Spalten möchten, dann teilen Sie die 12 Spalten durch 2, so dass die Antwort 6 Spalten ist. Dies ist ein Beispiel für eine responsive Bootstrap 2-Spalte.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


<div class="container"> 
    <div class="col-lg-6 col-md-6 col-sm-12" style="background-color: red"> 
     Column 1 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-12" style="background-color: green"> 
     Column 2 
    </div 
<div>

Ausgang:

Quelle

2017-10-29 05:00:46

<div class="container"> 
    <div class="col-lg-6 col-md-6 > 
     Column 1 
    </div> 
    <div class="col-lg-6 col-md-6 > 
     Column 2 
    </div 
<div>

Quelle

2017-11-06 01:47:46

Was macht dieser Code? –

Dies ist ein Stück Kuchen mit Bootstrap.

<div class="container"> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     First Column 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     Second Column 
    </div> 
<div>

Quelle

2017-11-07 06:13:11

Wie werden zwei Spalten in HTML angezeigt?

Antwort

Verwandte Themen