将div修复为正确

Question

http://tinkerbin.com/OREvWmf6

我想做的是确保我的徽标保持在右侧...

所以链接将在左侧包裹。但相反，他们会推倒徽标。

需要顶部图像，底部是我得到的。

<div style="width: 100%; height: 75px; background:#B9C7D4" >
        Link 1
    Link2
    Link 3
          Link 1
    Link2
    Link 3
          Link 1
    Link2
    Link 3
          Link 1
    Link2
    Link 3
     <img height=75px style="float:right;" src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" alt=""/>

</div>

Answer 1

首先放置您的图片：

<div style="width: 100%; height: 75px; background:#B9C7D4" >
     <img height=75px style="float:right;" src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" alt=""/>

        Link 1
    Link2
    Link 3
          Link 1
    Link2
    Link 3
          Link 1
    Link2
    Link 3
          Link 1
    Link2
    Link 3

</div>

Answer 2

如果你以这种方式构建它是最容易的：

<div class="wrapper clearfix">
    <div class="links"><!-- ul with links or whatever --></div>
    <div class="logo"><img /></div>
</div>

使用样式：

<style type="text/css">
.links { width: 250px; float: left;}
.logo  { width: 75px; float: right; }
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
 }
 .clearfix:after {
    clear:both;
 }
 /* For IE 6/7 (trigger hasLayout) */
 .clearfix {
    zoom:1;
 }
 </style>

注意：What methods of ‘clearfix’ can I use?

中的clearfix代码被盗

Answer 3

<img height=75px style="float:right;position:absolute;top:0px;right:0px;" src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" alt=""/>