Question

我想将logo.png浮动到左侧但不起作用。这是我的Rails代码：

<!DOCTYPE html>
<html>
<head>
  <title>Pragprog Books Online Store</title>
  <%= stylesheet_link_tag   "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag    "application", "data-turbolinks-track"  => true %>
  <%= csrf_meta_tags %>
  </head>
  <body class="<%= controller.controller_name %>">
    <div id="banner">
        <%= image_tag ("logo.png") %>         <----------- can't move this thing!
        <%= @page_title || "Pragmatic Bookshelf"%>
    </div>
    <div id ="columns">
        <div id="side">
            <ul>
                <li><a href="http://www......">Home</a></li>
                <li><a href="http://www......">Questions</a></li>
                <li><a href="http://www......">News</a></li>
                <li><a href="http://www......">Contact</a></li>
            </ul>
        </div>
        <div id="main">
            <%= yield %>
        </div>
    </div>
  </body>
</html>

这是CSS：

#banner {
    background: #9c9;
    padding: 10px;
    border-bottom: 2px solid;
    font: small-caps 40px/40px "Times New Roman", serif;
    color: #282;
    text-align:  center;
    img {
        float: left;
    }
}

我正在使用代码，我似乎无法操纵图像。环顾四周找不到什么东西却找不到东西。我错过了什么？谢谢你的帮助！

Answer 1

#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align:  center;
}
#banner img {
    float: left;
}
#banner h1 {
    text-align:center
}

当然这只是一个近似值，您需要调整一些内容，但请查看this fiddle以了解它是如何完成的并根据需要进行更改

Answer 2

图片代码的默认display样式为inline，不会浮动。您应该在样式表中将display更改为block。另外，将其position样式设置为relative，以允许块被推送到＃34;在#banner div内部：

#banner {
    background: #9c9;
    padding: 10px;
    border-bottom: 2px solid;
    font: small-caps 40px/40px "Times New Roman", serif;
    color: #282;
    text-align:  center;
    img {
        display: block;
        position: relative;
        float: left;
    }
}

希望这适合你！

如何将我的图像标签漂浮在轨道上的红宝石中？

2 个答案: