Question

我正在尝试为这样的网页设置标题：

header

这是我到目前为止所尝试的代码：

HTML

<header id="top-section">
  <div class="content-wrapper">
      <div class="float-left">
          <a href="../Home/Index"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" alt="SustIMS" width="50%" height="50%" /></a>
      </div>
      <p class="user-info">
          <div class="user-info">
          Welcome Jon
          </div>
      <div class="float-right">
          <a href="Index">
          <img class="toolbar-icons" alt="Home" src="http://htiins.com/wp-content/uploads/2012/10/home-icon.png" /></a>
      </div>
      </p>
  </div>
</header>

CSS

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: rgba(240, 240, 240, 1); 
  border: 2px solid red;
}

.float-left {
    float: left;
    width: 200px;
    border: 2px solid cyan;
}

.float-right {
    float: right;
}


#top-section
{
    border: 4px solid blue;
    height: 120px;

}


.user-info
{
    float: right;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 1.25em;
    border: 2px solid green;

}

.toolbar-icons
{
    float: right;
    width: 100px;
    height: 100px;
    clear: both;
    border: 2px solid orange;
}

这是Fiddle。

我设置了不同颜色的边框，以便更好地理解div的定位。

如何实现上图所示的效果？

由于

*编辑**

也许这可以更好地解释我正在寻找的东西：这里应该是这样的：

example

到目前为止，感谢您的一些好答案！

Answer 1

移动

<p class="user-info">
<div class="user-info">
      Welcome Jon
</div>

进入我们的float-right div并给出标题为

的css样式

header{
    overflow:hidden;
    padding:10px;
}

最终得到这个结果。

http://jsfiddle.net/P9Zjx/

Answer 2

我不确定您要使用的尺寸以及是否应该响应，例如堆叠在移动设备上，但这应该可以帮助您更接近您想要的。我稍微清理了code ......

<强> http://jsfiddle.net/7VR85/2/

Answer 3

我已更新您的代码，如下所示。更改一些标签并为您的小提琴添加一些样式属性。

  <header id="top-section">
  <div class="content-wrapper">
  <div class="float-left">
      <a href="../Home/Index"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" alt="SustIMS" width="50%" height="50%" /></a>
  </div>
  <div class="float-right">
      <div class="user-info">
      Welcome Jona  </div>

      <a href="Index">
      <img class="toolbar-icons" alt="Home" src="http://htiins.com/wp-content/uploads/2012/10/home-icon.png" /></a>

  </div>     
</div>    
</header>

FIDDLE DEMO

具体的div定位

3 个答案: