Wie man die horizontale Ausrichtung von HTML-Komponenten macht

Werfen Sie einen Blick auf target code .Hier versuche ich das Haupt Div in 2 gleiche Hälften zu teilen und legen Sie die 2 Tabellen in der Mitte von jedem von ihnen. Bitte helfen Sie mir die gleicheWie man die horizontale Ausrichtung von HTML-Komponenten macht

<div id="title"> 
Split Screen into 2 equaly halves 
</div> 
<div > 
<table id="myTable"> 
<tr > 
    <td ></td> 
    <td class="row_bottom"></td> 
    <td ></td> 
</tr> 
<tr > 
    <td class="row_top"></td> 
    <td class="row"></td> 
    <td class="row_top"></td> 
</tr> 
<tr > 
    <td ></td> 
    <td class="row_bottom"></td> 
    <td ></td> 
</tr> 
</table> 
<table id="myTable"> 
<tr > 
    <td ></td> 
    <td class="row_bottom"></td> 
    <td ></td> 
</tr> 
<tr > 
    <td class="row_top"></td> 
    <td class="row"></td> 
    <td class="row_top"></td> 
</tr> 
<tr > 
    <td ></td> 
    <td class="row_bottom"></td> 
    <td ></td> 
</tr> 
</table> 
</div>

Quelle

2016-03-26 Arjun Sreepad

https://jsfiddle.net/arjunsreepad/hnmgnLat/%60 ist nicht arbeiten – DanyCode

können Sie den CODE geben Sie schon versucht? – DanyCode

niemand sieht, dass er die ID = "myTable" zweimal in seinem Code http://www.w3schools.com/tags/att_global_id.asp verwendet – DanyCode

Es zu tun, ist nicht so etwas wie ein Element in zwei Hälften aufzuteilen. Stelle stattdessen 2 Elemente her und ordne sie richtig an.

Machen divs 50% der Breite des Elternelements (Körper in diesem Fall). Lass sie nach links schweben.

die Tabellen ausrichten

innen mit

margin: 50px auto;

Lösung: https://jsfiddle.net/hnmgnLat/2/

Quelle

2016-03-26 18:49:38 Webber

versuchen, wie diese

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

diesen Stil in CSS hinzufügen

.parent { 
    width: 100%; 
    margin: 0 auto; 
} 
.child { 
    min-width:50%; 
    display:inline-block; 
}

Quelle

2016-03-26 18:52:23 Ankanna

Sie verwenden können, eine ID nur einmal in Ihrem Code und dann haben Sie einen linken und rechten Schwimmer

oder Sie Flexbox

.row 
 
{ 
 
\t border: 2px solid black; 
 
\t width: 100px; 
 
\t height: 100px; 
 
} 
 
.row_top 
 
{ 
 
\t 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border-top:2px solid black; 
 
\t border-bottom:2px solid black; 
 

 
} 
 
.row_bottom 
 
{ 
 
\t 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border-left:2px solid black; 
 
\t border-right:2px solid black; 
 

 

 
} 
 
.test{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    justify-content: space-around; 
 
} 
 

 
#title 
 
{ 
 

 
\t text-align: center; 
 
\t border-bottom: 1px solid black; 
 
\t width: 250px; 
 
\t margin: auto; 
 
\t padding: 10px; 
 
}

<div id="title"> 
 
\t Split Screen into 2 equaly halves 
 
</div> 
 
<div class="test"> 
 
\t 
 
\t \t <table id="myTableleft"> 
 
\t <tr > 
 
\t \t <td ></td> 
 
\t \t <td class="row_bottom"></td> 
 
\t \t <td ></td> 
 
\t </tr> 
 
\t <tr > 
 
\t \t <td class="row_top"></td> 
 
\t \t <td class="row"></td> 
 
\t \t <td class="row_top"></td> 
 
\t </tr> 
 
\t <tr > 
 
\t \t <td ></td> 
 
\t \t <td class="row_bottom"></td> 
 
\t \t <td ></td> 
 
\t </tr> 
 
</table> 
 
\t 
 
\t \t <table id="myTableright"> 
 
\t <tr > 
 
\t \t <td ></td> 
 
\t \t <td class="row_bottom"></td> 
 
\t \t <td ></td> 
 
\t </tr> 
 
\t <tr > 
 
\t \t <td class="row_top"></td> 
 
\t \t <td class="row"></td> 
 
\t \t <td class="row_top"></td> 
 
\t </tr> 
 
\t <tr > 
 
\t \t <td ></td> 
 
\t \t <td class="row_bottom"></td> 
 
\t \t <td ></td> 
 
\t </tr> 
 
</table> 
 
\t 
 
</div>

Quelle

2016-03-26 18:52:32 DanyCode

Legen Sie die beiden Tabellen in unterschiedlichen divs.set die Breite verwenden können der zwei divs zu jeweils 45%. Setzen Sie dann den Float des ersten Div nach links. Ich hoffe das funktioniert. Die 45% Breite sollte Platz für Rand und Polsterung geben, falls es existiert. Oder besser noch setzen Sie alle Polsterung und Marge auf 0px und setzen Sie die Breite auf 50%

Quelle

2016-03-26 18:53:54

Wie man die horizontale Ausrichtung von HTML-Komponenten macht

Antwort

Verwandte Themen