css - 具有多行的 HTML 标头

Question

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

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

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

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

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