Question

我在php中生成一个表，并希望它在屏幕的左上角。该表的宽度略有不同，因此它的右侧应该是两个文本块（text1，text2）和第三个文本（text3），它们浮动在屏幕的最右上方。三个文本下面应该是text4。

要求： Text1需要始终位于表格的右侧。 text4总是需要低于前3个文本。

我上传了一张带有span / div / table / text的图片，并且字面一直试图安排这些图片约1.5小时。看起来它应该非常简单，但我正在努力满足我的要求，其中一个似乎总是错位。（所有＆＃39;文本＆＃39;只是html文字的一部分（不是<input type=text或<textarea>）

编辑：谢谢，是否可以不使用库或引导程序？

Answer 1

如果您不想使用<table>标记进行布局，并且不喜欢对项目的额外大依赖（例如bootstrap），可以选择以下选项：

<div class="table">
  Table
</div>
<div class="text-container">
  <div class="text1">
    Text1
  </div>
  <div class="text2">
    Text2
  </div>
  <div class="text3">
    Text3
  </div>
  <div class="text4">
    Text4
  </div>
</div>

至关重要的是.table，.text-container和.text{1,2,3}的显示类型都是display: inline-block;。这将使它们成为内联。但是，要强制包裹.text4，这仍然必须是display: block;。

https://jsfiddle.net/nnLofpL1/

就像hjardine在他的例子中使用的那样：查看clear属性也是一个好主意。

Answer 2

我可以看到你不想使用bootstrap，所以我更新了一个答案，这样你就不必使用一个表，完全相同的输出，但没有使用表输出的问题

＆＃13;

.div1{float:left;width:40%;border:1px solid #000;min-height:200px;}
.div2{float:right;width:58%;border:1px solid #000;min-height:200px;}
.row1{min-height:100px;}
.sp1{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp2{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp3{float:right;width:30%;text-align:right;padding:4px;border:1px solid #000;min-height:60px;}
.divRow{width:100%;border: 1px solid #000;}

＆＃13;

<div>
  <div class="div1">
     <div class="divRow">1</div>
     <div class="divRow">2</div>
     <div class="divRow">3</div>
     <div class="divRow">4</div>
     <div class="divRow">5</div>
     <div class="divRow">6</div>
  </div>
  
  <div class="div2">
    <div>
      <div class="row1">
        <div class="sp1">1</div>
        <div class="sp2">2</div>
        <div class="sp3">3</div>
        <div style="clear:both;"></div>
      </div>
      <div class="row2" style="border:1px solid #000;min-height:40px;">
        sadsadsad
      </div>
    </div>  
  </div>
  <div style="clear:both;">
    
  </div>
</div>

＆＃13;

布局页面的简单解决方案就是使用引导程序，因为引导程序中的网格布局，无论页面大小如何，都可以将内容保持在相同的相对位置。 / p>

对于你想做的事情，我认为它会对你有很大帮助。

实施例

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="Container">
<div class="row">
   <div class="col-xs-2">
        Top left
   </div>
   <div class="col-xs-2 col-xs-offset-8">
        Top right
   </div>
</div>
</div>

＆＃13;

这是Bootstrap的链接，非常值得学习恕我直言！

Answer 3

然而，这不是最好的解决方案，经典的“桌上表”可以胜任：

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>PHP generated data</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr style="height: 60px;">
          <td>Text 1</td>
          <td style="padding-left: 100px;">Text 2</td>
          <td style="width: 200px; text-align: right;">Text 3</td>
        </tr>
        <tr style="height: 60px;">
          <td colspan="3">Text 4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

https://jsfiddle.net/jrrfbqfk/

是否可以这种方式布局span / div？

3 个答案: