CSS 通过表单放置图像答案

【问题标题】：CSS placing image by a formCSS 通过表单放置图像
【发布时间】：2015-06-21 07:47:29
【问题描述】：

我希望在表单旁边显示一张图片。这是我尝试过的。

CSS 文件：

.il {
    display:inline;
    padding: 0px;
    margin: 0px;
}

new.html.erb

<div class="il">
<%= image_tag("successful_forex_trader.jpg", :alt => "Forex Money Manager") %>
    <div class="small-6 large-centered columns">    
    <%= form_for(@investor) do |f| %>

        <%= render 'shared/error_messages', object: f.object %>
            <fieldset>
                <legend> Enter your best details</legend>

                <%= f.label :name %>
                <%= f.text_field :name, :placeholder => "John Doe" %> </br>

                <%= f.label :email %>
                <%= f.text_field :email, :placeholder => "you@example.com" %></br>

                <%= f.label :country %>
                <%= f.text_field :country %></br>

                <%= f.label :phone %>
                <%= f.text_field :phone, :placeholder => "" %></br>

                <%= f.submit "I'm interested!", :class => 'button radius' %>
            </fieldset>
        <% end %>

    </div>
</div>

生成的html代码：

 <div class="il">
<img alt="Forex Money Manager" src="/assets/successful_forex_trader-a46ac55676d8bd8789095d2e5ebbef0c588692b25c6d8d3da51b32efa6fd2435.jpg" />
    <div class="small-6 large-centered columns">    
    <form class="new_investor" id="new_investor" action="/investors" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="n10HveoPkQJz0n5llHZgPO7hlgiUhoOgFWOfW28SoKn9/YwRtFLZC5+8bFl0Ywy0gOStDirJ+6gmLB7wHA==" />


            <fieldset>
                <legend> Enter your best details</legend>

                <label for="investor_name">Name</label>
                <input placeholder="John Doe" type="text" name="investor[name]" id="investor_name" /> </br>

                <label for="investor_email">Email</label>
                <input placeholder="you@example.com" type="text" name="investor[email]" id="investor_email" /></br>

                <label for="investor_country">Country</label>
                <input type="text" name="investor[country]" id="investor_country" /></br>

                <label for="investor_phone">Phone</label>
                <input placeholder="+48111111111" type="text" name="investor[phone]" id="investor_phone" /></br>

                <input type="submit" name="commit" value="I&#39;m interested!" class="button radius" />
            </fieldset>
</form>     
    </div>
</div>

但是，当您访问我的实时站点时，您会看到图像位于表单上方。我做错了什么？ https://infinite-oasis-2303.herokuapp.com/investors/new

【问题讨论】：

标签： html css ruby-on-rails zurb-foundation-5

【解决方案1】：

CSS display:inline 被应用于容器，而不是它的元素。一种方法是使用class=left 浮动<img> 并将其移动到<form> 旁边，在居中的div 内。

<div class="small-9 large-centered columns">    
<%= image_tag("successful_forex_trader.jpg", :class => 'left', :alt => "Forex Money Manager") %>
<%= form_for(@investor) do |f| %>

【讨论】：

【解决方案2】：

这个div占据了整个宽度：

<div class="small-6 large-centered columns">

所以即使使用 display:inline-block 它也会溢出到另一行。你需要做的就是像这样在 div 中移动 img：

<div class="small-6 large-centered columns">    
    <img alt="Forex Money Manager" src="/assets/successful_forex_trader-a46ac55676d8bd8789095d2e5ebbef0c588692b25c6d8d3da51b32efa6fd2435.jpg" />
    <form class="new_investor" id="new_investor" action="/investors" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="n10HveoPkQJz0n5llHZgPO7hlgiUhoOgFWOfW28SoKn9/YwRtFLZC5+8bFl0Ywy0gOStDirJ+6gmLB7wHA==" />

在此之后，您还必须使表单类 new_investor 显示：inline-block。这应该将图像放在表单旁边。

在此之后，您可能还需要清理另外两件事：

你的 img 标签有 vertical-align: middle ，不确定是不是故意的
当您将 img 移入中间列时，它不会增长，因此您可能需要调整它的大小，因为它有更多内容。

【讨论】：

【解决方案3】：

对于包含“small-6 large-centered columns”类的div，css需要为

display: inline-blcok;

您可以添加一个新类来添加上述 css，也可以使用该 div 的内联。

对于图片，下面的css需要更新。

.il img{
   vertical-align: top;
}

【讨论】：