具有多行的 HTML 标头答案

【问题标题】：HTML header with multiple rows具有多行的 HTML 标头
【发布时间】：2019-11-28 19:20:46
【问题描述】：

我想为一个看起来像上图中的网站创建一个标题。

Div1 位于左上方，具有固定大小（它是一个徽标）
Div2 和 Div3 在 Div1 的右边
Div4 位于右中（右上角也可以）

这样的布局可以用 div 实现吗？我应该改用桌子吗？

【问题讨论】：

您的图片不清楚，能否请您上传一张更好的图片。是的，divs 和 CSS 可以实现任何类型的布局。
您不应该使用表格，因为这不是表格数据。您应该尝试使用 divs 进行此操作，然后发布 HTML 和 CSS（如果它不起作用）以便人们可以提供帮助。

标签： css html styles

【解决方案1】：

这里我创建了一个仅使用 div 的示例

#bigbox {
  width: 1024px;
  height: 150px;
  background-color: red;
}

#bigbox div {
  float: left;
}

#logobox {
  height: 150px;
  width: 150px;
  background-color: blue;
}

#column2 {
  height: 150px;
  width: 550px;
  background-color: green;
}

.row {
  height: 50%;
  width: 550px;
  background-color: black;
  color: white;
}

#rightContent {
  float: right !important;
  background-color: yellow;
  height: 100%;
  width: 200px;
}

<div id="bigbox">
  <div id="logobox"></div>
  <div id="column2">
    <div class="row">1</div>
    <div class="row">2</div>
  </div>
  <div id="rightContent">&nbsp;</div>
</div>

【讨论】：

【解决方案2】：

使用引导程序我们可以实现如下：

<div class="row">
  <div class="col-sm-2">a</div>
  <div class="col-sm-8">
    <div class="row">
      <div class="col-sm-12">c</div>
    </div>
    <div class="row">
      <div class="col-sm-12">d</div>
    </div>
  </div>
  <div class="col-sm-2">b</div>
</div>

【讨论】：