0

在不使用 css 或 table 的情况下帮助 div 中的新手获取 php 或 html。

尝试使用具有以下行为的 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% 和另一个 id=right 的 div 设置为 style="position:fixed..." 但它只是搞砸了，把所有东西都放在左边。

4

1 回答 1

1

实现这一点的最简单方法是使用display: tableanddisplay: 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 回答