包含多行的HTML标头

Question

我想为网站创建一个类似上图中的标题。

• Div1是左上角，有固定大小（它是徽标）
• Div2和Div3是Div1的权利
• Div4位于右侧（右上角也可以接受）

div可以实现这样的布局吗？我应该使用表吗？

Answer 1

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

http://jsfiddle.net/YQTTb/

<强> HTML

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

<强> CSS

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

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>