1

この表を見てみましょう:

<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>

私はそのようなことをする必要がありますが、DIV 要素を使用します (申し訳ありませんが、上司はテーブルを許可しません)。本当の問題は、直接設定せずに同じ幅を設定する方法ですか? つまり、最初の行が長い場合は実際の幅になり、そうでない場合は2行目になります。できればjavascript/jQueryのハッキングなしで。

4

3 に答える 3

1

「列」の幅をコンテンツとともに拡大したいと思いますか？列の各 div の幅を動的に設定しますか?

css でこれを行う方法は思いつきませんが、いくつかの div を使用したジガリー ポケリーは機能する可能性があります。

<style>
    .table{
      border:1px solid black;
      position:relative;
    }
    .column{
      border:1px solid red;
      display:inline-block;
    }
    .cell{
      border:1px solid blue;
      float:left;
      clear:both;
    }
</style>
    <div class="table">
        <div class="column">
            <div class"cell">11</div>
            <div class"cell">ffff</div>
        </div>
        <div class="column">
            <div class"cell">1111</div>
            <div class"cell">f</div>
        </div>
        <div class="column">
            <div class"cell">1</div>
            <div class"cell">fff</div>
        </div>
    </div>
于 2013-02-27T14:19:23.633 に答える
1

flexbox古いブラウザー用の JavaScript フォールバックを使用して、最新のブラウザーをチェックアウトしたいと思います。

http://css-tricks.com/using-flexbox/

Flexbox は非常に優れており、間違いなくレイアウトの未来の一部です。構文は過去数年間でかなり変更されたため、「古い」構文と「新しい」構文が使用されています。しかし、古い構文、新しい構文、およびその中間の構文を組み合わせれば、適切なブラウザー サポートを得ることができます。特に単純で、おそらく最も一般的な使用例: 順序制御グリッド

http://caniuse.com/flexboxはかなりまともなサポートを示しています.. IE10、FF、Chrome、Safari、さらには Opera まで! *

*「古いものと新しいもの」を組み合わせた構文を使用

于 2013-02-27T14:10:56.893 に答える
0 
<div id="main_div">
  <div id="nr1">   </div>
  <div id="nr2">   </div>
</div>

CSS を使用してスタイルを設定します: 幅、高さ、マージン、各 div の位置

于 2013-02-27T14:06:40.180 に答える