0

CSS やテーブルを使用せずに、php または html の div で初心者を支援します。

次の動作で div を使用して、この 4 x 列、2 x 行を実行しようとしています

 // [.....adjustable....][fixed][fixed][fixed]
 // [.....adjustable....][fixed][fixed][fixed]

以下は私のコードです--------------------------------------------

<form action="welcome.php" method="get">

<div style="position: relative; width: 100%; ">
  <div id="left" style="position:relative;float:left;width:68%;"> left </div>
  <div id="right" style="float:left;width:13%;"> Name: </div>
  <div id="right2" style="float:left;width:13%;"> Age: </div>
  <div id="right3" style="float:left;width:6%;"></div>   
</div>

<div style="position: relative; width: 100%; ">
  <div id="left2" style="position:relative;float:left;width:68%;"> left2 </div>
  <div id="right4" style="float:left;width:13%;">  <input type="text" name="name"></div>
  <div id="right5" style="float:left;width:13%;">  <input type="text" name="age"></div>
  <div id="right6" style="float:left;width:6%;"> <input name="submit" type="submit"></div>
</div>

私の画面では、68% は 860 pxl に相当します。他の画面解像度になると変更されるはずです。私は id=right から style="position:fixed..." で 68% から 100% と他の div を作成しようとしましたが、混乱してすべてが左側に配置されます。

4

1 に答える 1

1

これを実現する最も簡単な方法は、実際のテーブルを使用せずに、display: tableおよびを使用display: table-cellして div をテーブルとしてスタイル設定することです。

jsbin の例。mdn の表示を参照してください。

この投稿には、CSS バージョンと、推奨されていないインライン スタイル バージョンの両方を追加します。

CSS バージョン

<div class="parent">
  <div class="left">ASDF</div>
  <div class="right">asdf</div>
  <div class="right">asdf</div>
  <div class="right">asdf</div>
</div>

CSS の場合:

.parent {
  display: table;
  width: 100%;
}

.left {
  width: auto;
  border: 1px dotted blue;
  display: table-cell;
}

.right {
  display: table-cell;
  width: 50px;
  border: 1px dotted green;
}

インライン スタイル バージョン

<div style="display: table; width: 100%;">
  <div style="display: table-cell;">ASDF</div>
  <div style="display: table-cell; width: 150px;">asdf</div>
  <div style="display: table-cell; width: 150px;">asdf</div>
  <div style="display: table-cell; width: 150px;">asdf</div>
</div>
于 2013-08-04T06:29:23.093 に答える