HTML Alignment Problem: Erstellen von Zeilen und Spalten mit div: Float-Tag

Hier ist mein HTML-Code.HTML Alignment Problem: Erstellen von Zeilen und Spalten mit div: Float-Tag

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <!-- <div class="stack"> --> 

    <!-- Row 1 --> 

    <div class="stack"> 
     <div class="row"> 
      <div class="col" align="center"> 
       <span style="font-weight: bold;">States of India</span> 
      </div> 
      <div class="col"></div> 
      <div class="col" align="center"> 
       <span style="font-weight: bold;">United States</span> 
      </div> 
     </div> <!-- End of div row class --> 


     <div class="row"> 
      <div class="col" align="center">Tamil Nadu</div> 
      <div class="col" align="center">Karnataka</div> 
      <div class="col" align="center">California</div> 
     </div> <!-- End of div row class --> 

     <div class="row"> 
      <div class="col"> 
       <div id="bloc11" class="donutSize">row 1 - column 1</div> 
      </div> 
      <div class="col"> 
       <div id="bloc12" class="donutSize">row 1 - column 2</div> 
      </div> 
      <div class="col"> 
       <div id="bloc13" class="donutSize">row 1 - column 3</div> 
      </div> 
     </div> <!-- End of div row class --> 
     <div class="row"> 
      <div class="col"> 
       <div id="bloc21">row 2 - column 1</div> 
      </div> 
      <div class="col"> 
       <div id="bloc22">row 2 - column 2</div> 
      </div> 
      <div class="col"> 
       <div id="bloc23">row 2 - column 3</div> 
      </div> 
     </div><!-- End of div row class --> 
    </div><!-- End of div stack class --> 
    <!-- </div> --> 

    <div class="stack2"> 
    <div class="row"> 
    <div class="col">United States & India</div> 
    </div> 
    <div class="row"> 
    <div class="col"> 
     <div id="skywalk-module" class="ssSize">United States and India are one of the 2 countries in the world. blah blah b</div> 
    </div> 
    </div><!-- End of div row class --> 
</div><!-- End of div stack2 class --> 

</body> 
</html>

Css:

.stack .row, 
.stack2 .row { 
    clear: both 
} 

.stack .row .col, 
.stack2 .row .col { 
    float: left; 
    height: auto; 
    border: 1px groove 
} 

.stack .row .col { 
    width: 33%; 
    align-items: center 
} 

.stack2 .row .col { 
    width: 99%; 
    align-items: center 
} 

.donutSize { 
    width: 160px; 
    height: 160px; 
    margin: 0 auto 
}

Sie möchten die "States of India" auszurichten zwischen "Tamil Nadu" und "Karnataka" eingegeben werden. Auch keine Notwendigkeit für einen Rahmen hier, richten Sie es auf die Mitte, etwas wie "Colspan = 2", wenn wir HTML-Tabellen verwenden.
Ich möchte einen Think Linie über "States of India", "Vereinigte Staaten" und "Karnataka" (siehe Bild label: Notwendigkeit denken hier Grenzlinie).

3.I wollen die letzten 2 Zeilen, Breite in der gleichen Zeile wie die ersten 4 Zeilen. Breite kommt nicht gleich. Wie Sie sehen können, haben die letzten 2 Zeilen nicht die gleiche Breite wie die ersten 4, sie haben etwas weniger Breite (siehe Bildbeschriftung: Linie gerade ausrichten)

Ich möchte die DIV-Tags verwenden und möchte keine Tabellen verwenden aus meinem eigenen Grund. Ich bin ok mit Tabelle zusammen mit den div-Tags verwendet. Ich brauche Div-Tags für jeden meiner Container, z. B. Staaten von Indien, Vereinigte Staaten, Tamil Nadu, Karnataka, usw.

Ich bin nicht in der Lage, dies zu lösen. bitte hilfe.

Hier ist mein Code in JSBIN.

http://jsbin.com/fasacu/4/edit?html,css,output

Quelle

2016-05-23 Raghu

Haben Sie versucht, CSS-Eigenschaften untersucht, und mit ihnen zu üben? Eigenschaften wie 'box-sizing' und' flexbox' und 'display: table' kommen mir in den Sinn. – Quantastical

Ich habe den Vorschlag von @Quantastical + einige andere Stapelüberlauf Antworten gefolgt.

HTML-Code:

<!-- Row 1 --> 

    <div class="div-table"> 
     <div class="div-table-row"> 
      <div class="div-table-col1" align="center"> 
       <span style="font-weight: bold;">States of India</span> 
      </div> 
      <div class="div-table-col" align="center"> 
       <span style="font-weight: bold;">United States</span> 
      </div> 
     </div> <!-- End of div row class --> 
    </div> 

     <div class="div-table"> 
     <div class="div-table-row"> 
      <div class="div-table-col3" align="center">Tamil Nadu</div> 
      <div class="div-table-col3" align="center">Karnataka</div> 
      <div class="div-table-col3" align="center">California</div> 
     </div> <!-- End of div row class --> 

     <div class="div-table-row"> 
      <div class="div-table-col3"> 
       <div id="bloc11" class="donutSize">row 1 - column 1</div> 
      </div> 
      <div class="div-table-col3"> 
       <div id="bloc12" class="donutSize">row 1 - column 2</div> 
      </div> 
      <div class="div-table-col3"> 
       <div id="bloc13" class="donutSize">row 1 - column 3</div> 
      </div> 
     </div> <!-- End of div row class --> 
     <div class="row"> 
      <div class="div-table-col3"> 
       <div id="bloc21">row 2 - column 1</div> 
      </div> 
      <div class="div-table-col3"> 
       <div id="bloc22">row 2 - column 2</div> 
      </div> 
      <div class="div-table-col3"> 
       <div id="bloc23">row 2 - column 3</div> 
      </div> 
     </div><!-- End of div row class --> 
    </div><!-- End of div table class --> 
    <!-- </div> --> 

    <div class="div-table"> 
    <div class="div-table-row"> 
    <div class="div-table-col2">United States & India</div> 
    </div> 
    </div> 
    <div class="div-table"> 
    <div class="div-table-row"> 
    <div class="div-table-col2"> 
     <div id="skywalk-module" class="ssSize">United States and India are one of the 2 countries in the world. blah blah b</div> 
    </div> 
    </div><!-- End of div row class --> 
</div><!-- End of div table class -->

Css:

.div-table{ 
    display:table;   
    width:auto;       
    border:1px solid #666666; 
} 
.div-table-row{ 
    display:table-row; 
    width:auto; 
    clear:both; 
} 
.div-table-col{ 
    float:left;/*fix for buggy browsers*/ 
    display:table-column;   
    width:200px;   
    border:1px solid #666666; 
} 

.div-table-col3{ 
    float:left;/*fix for buggy browsers*/ 
    display:table-column;   
    width:200px;   
    border:1px solid #666666; 
} 

.div-table-col1{ 
    float:left;/*fix for buggy browsers*/ 
    display:table-column;   
    width:200px;   
    width:400px; 
    text-align:center; 
    border:1px solid #666666; 
} 

.div-table-col2{ 
    float:left;/*fix for buggy browsers*/ 
    display:table-column;   
    width:600px;   
    border:0px solid #666666; 
}

Hier ist der Link: http://jsbin.com/fasacu/15/edit?html,css,output

Quelle

2016-05-23 04:16:43 Raghu

Ich aktualisiere Ihren Code für Grenz- und Breitenänderungen http://jsbin.com/jaqiqawora/edit?html,css,output – sms247

Ich schlage vor, das Tabellenelement mit den Zellelementen mit ihrem verbundenen statt div-Tags. Zum Beispiel für die Tabelle Spaltenüberschriften:

<table> 
 
    <tr> 
 
     <th colspan="2">India</th> 
 
     <!--table header cells by default center text both horizontally and vertically.--> 
 
    </tr> 
 
</table>

Zur Ausrichtung ,:

<table> 
 
    <tr> 
 
    <th>header</th> 
 
    <th>header2</th> 
 
    <th>header3</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3">text string</td> 
 
    </tr> 
 
</table>

Für die Grenze, man die Tabelle Stil könnte mit CSS. Sie können Zellenabstand hinzufügen, Rahmenstile für die Zellen und die Tabelle selbst usw. unterschiedlich festlegen.

Interessant, dass Sie divs anstelle des Tabellenelements verwenden, um Informationen zu organisieren. Das Tabellenelement hält alles sauber, und anstelle jedes Tags, das mit "div" beginnt, können Sie identifizieren, welche Elemente die Zeilen (tr), Header-Zellen (th) und die Datenzellen (td) betreffen. habe eine gute Woche.

Quelle

2016-05-23 03:56:50

Ich möchte die

header

header2

verwenden, aber dies funktioniert nicht zusammen mit Tabellen. Tut mir leid, ich kann diese Antwort nicht akzeptieren. – Raghu

Derzeit schlägt W3C vor, div-Tags für Tabellen nicht mehr zu verwenden, auch wenn die div-Tags eine bequeme Flexibilität bieten. Die Tabellenelemente organisieren im Vergleich zum "Tausendsassa" die Kopf- und Datenzellen besser. Das Problem bei der Verwendung von div-Tags für Tabellen besteht darin, dass Sie sich merken müssen, welches div-Tag die Daten für welche Zelle in welcher Zeile in welcher Spalte enthält. –

HTML Alignment Problem: Erstellen von Zeilen und Spalten mit div: Float-Tag

Antwort

Verwandte Themen