3

1 行 2 列のテーブルがあります。1 つの列に入れたい 2 つのメニューがあります。1 つは上に、2 番目は下に。動作しません。valign動作させる方法がわかりません。2 番目のテキストはtd変更される可能性があるため、大きくなった場合は 2 番目のメニューを一番下に移動する必要があります。

以下の私の現在のコードを見てください：

<table>
  <tr>
     <td>
      <table>
       <tr>
        <td  valign="top">
          <div class="left">
                <ul>
                   <li><a href="#">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                </ul>                                     
         </div>
         </td>
        </tr>
        <tr>
         <td valign="bottom">
           <div class="left">
               <ul>
                  <li><a href="#">four</a></li>
                  <li><a href="#">five</a></li>
              </ul>        
           </div>
         </td>
      </tr>
     </table>
    </td>
    <td valign="bottom">
       <div>
       some text here
    </div>
   </td>
 </tr>

4

1 に答える 1

0

コードに問題はありません

すべてのテーブル タグに border="1" を追加してみてください。<table border ="1">あなたはそれを理解する

あなたの最後を無効にしてみてください<div>

または指定した colspan<td>

ここに画像の説明を入力

このコードで新しく更新すると、次のようになります。

<table border="1">
  <tr>
     <td>
      <table border ="1">
       <tr>
        <td  valign="top">
          <div class="left">
                <ul>
                   <li><a href="#">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                </ul>                                     
         </div>
         </td>
        </tr>
        <tr>
         <td valign="bottom">
           <div class="left">
               <ul>
                  <li><a href="#">four</a></li>
                  <li><a href="#">five</a></li>
              </ul>        
           </div>
         </td>
      </tr>
     </table>
    </td>
    <td valign="bottom" style="display:block; margin-left:auto; margin-right: auto;">
        <div>
       some text here some text here some text here some text here some text here some text here some text here some text here 
        </div>
   </td>
 </tr>

ここに画像の説明を入力

于 2012-09-01T02:14:52.917 に答える