Question

我正在尝试同时学习西班牙语和基本的网页设计。我试图并排组织这些表，但他们并没有彼此对齐。我认为你需要做的只是放入浮动：离开css类然而它不起作用。请帮忙！

<!doctype html>
<html>
    <head>
    <style>
    .vertfirst {
    float:left;
    position: relative;
    width: 100%;
    overflow:hidden;

}
.first {
    float: left;
    width:25%;
    background-color:blue;
}

.second {
    float: left;
    width:25%;
    background-color:blue;
}
.third {
    float: left;
    width:25%;
    background-color:blue;
}
    </style>
    <head>
    <body>
        <div class="vertfirst">
        <div class="first">
        <table>
        1-9
        <tr>
        <th>#</th>
        <th>unidades</th>
        </tr>
        <tr>
        <td>1</td>
        <td>uno</td>
        </tr>
        <tr>
        <td>2</td>
        <td>dos</td>
        </tr>
        <tr>
        <td>3</td>
        <td>tres</td>
        </tr>
        <tr>
        <td>4</td>
        <td>cuatro</td>
        </tr>
        <tr>
        <td>5</td>
        <td>cino</td>
        </tr>
        <tr>
        <td>6</td>
        <td>sies</td>
        </tr>
        <tr>
        <td>7</td>
        <td>siete</td>
        </tr>
        <tr>
        <td>8</td>
        <td>ocho</td>
        </tr>
        <tr>
        <td>9</td>
        <td>nueve</td>
        </tr>
        </table>
        <div>
        </br>
<!--10-90-->
        <div class="second">
        <table>
        10-90
        <tr>
        <th>#</th>
        <th>decenas</th>
        </tr>
        <tr>
        <td>10</td>
        <td>diez</td>
        </tr>
        <tr>
        <td>20</td>
        <td>veinte</td>
        </tr>
        <tr>
        <td>30</td>
        <td>treinta</td>
        </tr>
        <tr>
        <td>40</td>
        <td>cuarenta</td>
        </tr>
        <tr>
        <td>50</td>
        <td>cincuenta</td>
        </tr>
        <tr>
        <td>60</td>
        <td>sesenta</td>
        </tr>
        <tr>
        <td>70</td>
        <td>setenta</td>
        </tr>
        <tr>
        <td>80</td>
        <td>ochenta</td>
        </tr>
        <tr>
        <td>90</td>
        <td>noventa</td>
        </tr>
        </table>
        <div>
        </br>
<!--100-900-->
        <div class="third">
        <table>
        100-900
        <tr>
        <th>#</th>
        <th>centenas</th>
        </tr>
        <tr>
        <td>100</td>
        <td>cien</td>
        </tr>
        <tr>
        <td>200</td>
        <td>doscientos</td>
        </tr>
        <tr>
        <td>300</td>
        <td>trescientos</td>
        </tr>
        <tr>
        <td>400</td>
        <td>cuatrocientos</td>
        </tr>
        <tr>
        <td>500</td>
        <td>quinientos</td>
        </tr>
        <tr>
        <td>600</td>
        <td>siescientos</td>
        </tr>
        <tr>
        <td>700</td>
        <td>setecientos</td>
        </tr>
        <tr>
        <td>800</td>
        <td>ochocientos</td>
        </tr>
        <tr>
        <td>900</td>
        <td>novecientos</td>
        </tr>
        </table>
        <div>
    </body>
</html>

Answer 1

您使用div关闭<div>。它应该是</div>。

您还需要删除</br>（顺便说一句，不存在，换行符为<br/>）。

演示：http://jsfiddle.net/m233m/

Answer 2

您是否尝试将表格放在2个表格中...就像这样

<table width="100%">
<tr>
<td width="50%" valign="top">

//Place Your First Tables Code Here

</td>
<td width="50%" valign="top">

//Place Your Second Tables Code Here

</td>
</tr>
</table>

把桌子和div放在一起

2 个答案: