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

【问题标题】：Is it possible to layout span/div in this way?是否可以以这种方式布局 span/div？
【发布时间】：2016-03-09 02:54:23
【问题描述】：

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

要求： Text1 必须始终位于表格的右侧。 text4 必须始终位于前 3 个文本的下方。

我上传了一张带有 span/div/table/text 的图片，并且 字面意思 已经尝试安排这些内容大约 1.5 小时了。看起来它应该非常简单，但我正在努力满足我的要求，其中一个似乎总是错位。（所有的“文本”都只是一段 html 文本（不是 <input type=text 或 <textarea>）

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

【问题讨论】：

为什么不使用 bootstrap，如果使用 table 方法，它将达不到大多数现代网站的要求。我认为你应该重新审视你在编程中想要做的事情，因为引导程序只是 CSS，现在所有好的网站都是响应式的。
（不一定是 bootstrap，但它是如何有效使用 CSS 的一个很好的例子）
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： html css styles alignment

【解决方案1】：

我可以看到你不想使用引导程序，所以我更新了一个答案，这样你也不必使用表格，输出完全相同，但没有使用表格进行输出的问题。

.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;}

<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>

一个简单的解决方案是使用引导程序来布置页面，以便将内容放在您想要的位置，因为引导程序中的网格布局可以使内容保持在相同的相对位置，无论页面大小如何。

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

示例

<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>

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

【讨论】：

@Leothelion 没必要，我只是表明他们可以在不使用不良做法的情况下做想做的事（明智的编码）。 Fiddles 是由人来摆弄的，它们不是一个人的 IP，使用另一个人的 Fiddle 并改进它当然不是坏习惯。因此无需登录等即可更新小提琴。
希望你明白我的意思。在我使用 table 的情况下也是如此，因为它只是根据需要取决于用户/开发人员，而且你不能仅仅因为一个人就说它的坏习惯。祝你好运。
@Leothelion 你为什么删除你的问题？它们是不同的情况，仅供参考，使用表格进行样式设置是社区公认的不良做法：一些推荐（不偏不倚）阅读 - Why not use tables for layout、Pros and cons of tables and divs、The jsFiddle site brands it as a Web playground

【解决方案2】：

但这不是最好的解决方案，经典的“表中表”可以完成这项工作：

<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/

【讨论】：

因为它有效。 OP 还说他也不想使用引导程序或其他库。您可以编写一个没有表格或 display:table 且没有引导程序的纯 HTML/CSS 解决方案，但我真的不明白这里的重点。

【解决方案3】：

如果您不喜欢在布局中使用 <table> 标签，并且不喜欢对您的项目过度依赖（如引导程序），则可以选择以下选项：

<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 属性可能也是一个好主意。

【讨论】：

我同意这一点，Bootstrap 不是必需的，但它是拆分 Content 和 Style 的一个很好的例子。来自我的 +1