Position 3 Divs, eine links, zwei rechts (oben und unten)

Es tut mir sehr leid, wenn meine Frage oder Codes für Sie verwirrend sind. Ich versuche 3 Divs zu platzieren, eine links, zwei rechts (oben bzw. unten). Ich mag es wie das folgende Bild sein:Position 3 Divs, eine links, zwei rechts (oben und unten)

ich die folgenden Codes verwenden, und ich kann das Symbol erhalte korrekt angezeigt, aber der Text „ferrari‘ und Ionen Checkbox nicht in ähnlicher Weise dargestellt wie Das Bild, das unten angehängt ist, und das div, das den Text "Some Icons" enthält, ist nicht ähnlich wie das unten angefügte Bild. Zuerst dachte ich, das ist eine einfache Aufgabe und ich habe es versucht, kann das aber nicht machen jeder Experte CSS mir bitte helfen?

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css"> 
 
    <script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script> 
 

 
<div class="container" style="width:25%;height:25%;display:inline-block;"> 
 
    
 
    <img style="width: 100%; 
 
    height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " /> 
 
</div> 
 

 
<div style="width:75%;height:25%;display:inline-block;"> 
 
    <b style="width:100%;height:50%;">Ferrari</b> 
 
    
 
    <!-- Will display some icons in it later--> 
 
    <div style="width:100%;height:50%;">Some Icons</div> 
 
</div> 
 

 
<div style="height:25%;width:75%;"> 
 
    <ion-checkbox> 
 
    Please check me and ETC. !!! 
 
    </ion-checkbox> 
 
</div>

Quelle

2017-02-12 Antoni

Sie sollten im eingebauten Rastersystem verwenden Ionic wird von einem als Behälter row Zuweisen und innerhalb dieser Zeile Spalten definieren. Sie können etwas tun ..

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content > 
     <div class="row"> 
     <div class= "item item-image col col-25"> 
     <img src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg"> 
     </div> 
     <div class= "list col col-75"> 
     <div class="item item-text-wrap"> 
     some text here 
     </div> 
     <ion-checkbox class="item item-text-wrap item-checkbox-right"> 
     othet text here 
     </ion-checkbox> 
     </div> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

Sie müssen die Polster entfernen, die die Zeilen und Spalten standardmäßig haben wie so.

/* Styles here */ 
.row, 
.col{ 
    padding:0; 
}

Arbeitsbeispiel http://play.ionic.io/app/296ddd83faf9

Quelle

2017-02-12 10:36:26 yaboiduke

100 für diese Antwort – Antoni

Hallo, wie kann ich eine bestimmte Zeilenhöhe ändern? – Antoni

Das Feld Einige Symbole wird nicht angezeigt, weil Sie am Ende des Attributs style eine " verloren haben.

Werfen Sie einen Blick auf den ionischen Rahmen docs Ihrer Frachten wickeln einfach: https://ionicframework.com/docs/v2/components/#grid

Quelle

2017-02-12 10:19:08 Nico

Sie Schwimmer können Sie die div nebeneinander auszurichten. Wenn Sie display: inline-block; verwenden, haben Sie einen kleinen zusätzlichen Abstand nach ihnen, so dass die Verwendung der exakten Breite nicht funktioniert. Sie müssen diesen Speicherbereich entfernen, wenn Sie dies mithilfe der Eigenschaft inline-block erreichen möchten. Hier ist ein Artikel, der erklärt, wie Sie das tun können. https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Oder Sie können stattdessen float verwenden. Sie müssen Floats löschen, die ich mit Clearfix CSS getan habe.

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

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css"> 
 
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script> 
 

 
<div class="container clearfix" style="width:25%;height:25%;float:left;"> 
 

 
    <img style="width: 100%; 
 
    height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " /> 
 
</div> 
 

 
<div class="clearfix" style="width:75%;height:25%;float:left;"> 
 
    <b style="width:100%;height:50%;">Ferrari</b> 
 

 
    <!-- Will display some icons in it later--> 
 
    <div style="width:100%;height:50%;">Some Icons</div> 
 
</div> 
 

 
<div style="height:25%;width:75%;"> 
 
    <ion-checkbox> 
 
    Please check me and ETC. !!! 
 
    </ion-checkbox> 
 
</div>

Quelle

2017-02-12 10:29:11 vikrantnegi007

Position 3 Divs, eine links, zwei rechts (oben und unten)

Antwort

Verwandte Themen