0

div内のテーブルにこの問題があります。私は 2 つのテーブルを作成しましたが、目標はそれらを隣り合わせにすることでした。それは結局、一方が他方の下になりました。できる限り CSS で遊んでみましたが、それほど経験がありません。コードは次のとおりです。

#contactdetails_table{
    width: 500px;
    height: 190px;
/*  border: solid #234b7c 3px; */
    background-color: #FFC3CE;
    border-radius: 15px;
    direction: rtl;
    float: left;
    color: white;
    font-size: large;
    position: relative;
    overflow: scroll;
}

これは、現在のテーブルを下回った 2 番目のテーブルのコードです。

<table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
                            <tr>
                                <td>الايميل:</td>
                                <td><?php echo $profiledetails->email; ?></td>
                            </tr>
                            <tr>
                                <td>المدينة:</td>
                                <td><?php echo $profiledetails->city; ?></td>
                            </tr>
                            <tr>
                                <td>الهاتف:</td>
                                <td><?php echo $profiledetails->telephone; ?></td>
                            </tr>
                            <tr>

                            </tr>
                        </table>

手伝ってくれてありがとう ：）

注: 最初の表が含まれています:

<div id="contactdetails_table">
                            <table  cellpadding="10" cellspacing="10" >
                            <tr>
                                <td>الاسم الكامل:</td>
                                <td><?php echo $profiledetails->fullname; ?></td>
                            </tr>
                            <tr>
                                <td>اسم المستخدم:</td>
                                <td><?php echo $profiledetails->username; ?></td>

                            </tr>

                            <tr>
                                <td>الجوال:</td>
                                <td><?php echo $profiledetails->mobile; ?></td>
                                                            </tr>

                            <tr>
                                <td>العنوان:</td>
                                <td><?php echo $profiledetails->address; ?></td>
                            </tr>
                        </table>

                        <table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
                            <tr>
                                <td>الايميل:</td>
                                <td><?php echo $profiledetails->email; ?></td>
                            </tr>
                            <tr>
                                <td>المدينة:</td>
                                <td><?php echo $profiledetails->city; ?></td>
                            </tr>
                            <tr>
                                <td>الهاتف:</td>
                                <td><?php echo $profiledetails->telephone; ?></td>
                            </tr>
                            <tr>

                            </tr>
                        </table>
4

3 に答える 3

1

外側の div (親) にも高さプロパティがないことを確認してください。コンテンツが外側の div よりも長い場合は、高さが削除されるまでポートルードアウトする必要があります。これは私に何度も起こりました。

于 2014-12-15T19:18:37.567 に答える
1

2 番目のテーブルは最初のテーブルの後にあるため、隣にはありません。最初のテーブルを右にフロートさせるか、マークアップに含まれるテーブルの順序を逆にする必要があります。

これはこの質問に似ています

于 2013-04-17T21:53:20.330 に答える
0

デフォルトでは、表はブロック要素として表示されます (したがって、表が互いに重なり合う理由)。

#contactdetails_table 内のすべてのテーブルをインライン ブロック要素として表示してみてください。

何かのようなもの

#contactdetails_table table{

    /* display as inline elements */
    display: inline-block;
    /* this will push the tables to the top of the div */
    vertical-align:top;

}

IE 7 以下では、スタイルシートを使用する必要があります。

      display: inline;
      zoom:1;
于 2013-04-17T22:06:50.407 に答える