Question

在不使用css或表格的情况下帮助div或php中的新手。

尝试使用具有以下行为的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像素。如果它转到其他屏幕分辨率，它应该改变。我尝试制作68％到100％的另一个div，id = right to style =“position：fixed ...”但它只是搞砸了，把所有东西放在左边。

Answer 1

实现此目的的最简单方法是使用display: table和display: table-cell将div设置为表格，而不使用实际表格：

Example on jsbin。请参阅display on 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>

当其他后续列固定时，如何使一个div可调？

1 个答案: