html - 如何使一个 div 可调，而其他后续列固定？

Question

在不使用 css 或 table 的情况下帮助 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。如果它转到其他屏幕分辨率，它应该改变。我尝试将 68% 设置为 100% 并将 id=right 的另一个 div 设置为 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>