如何在轨道上的ruby中浮动图像标记？

I want to float logo.png to the left but it won't work. Here's my Rails code:

我想将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>

Here's the CSS:

这是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;
    }
}

I'm futzing around with the code and I can't seem to manipulate the image at all. Looked around for a missed or something but can't find a thing. What am I missing? Thanks for the help!

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

2 个解决方案

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

of course this is just an approximation, you'll need to adjust things, but take a look to this fiddle to see how is it done and make your changes as needed

当然这只是一个近似值,你需要调整一下,但是看看这个小提琴,看它是如何完成的,并根据需要进行更改

#2

The image tag has a default display style of inline, which will not float. You should change the display to block in your stylesheet. Also, set its position style to relative to allow the block to be "pushed around" inside of the #banner div:

图像标记具有内联的默认显示样式,不会浮动。您应该在样式表中将显示更改为阻止。另外,将其位置样式设置为relative,以允许块在#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;
    }
}

Hope this works for you!

希望这对你有用!

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