CSS размещение изображения по форме

Question

Я хочу, чтобы изображение появилось рядом с формой. Это то, что я пробовал.

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

Answer 1

CSS display:inline применяется к контейнеру, а не к его элементам. Один из подходов состоит в том, чтобы просто поместить <img> с помощью class=left и переместить его рядом с <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| %> 

Answer 2

Этот ДИВ занимает всю ширину:

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

Таким образом, даже с дисплеем: встроенный блок он проливает на другую линию. Что вы должны сделать, это переместить IMG внутри этого DIV так:

<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 дисплей: встроенный блок. Это должно помещать изображение рядом с формой.

После этого, там, скорее всего, две вещи, которые нужно очистить:

1. Ваш IMG тег имеет вертикальное выравнивание: середина на нем, не уверен, если это намеренное
2. Средняя колонка не будет когда вы перемещаете img в него, поэтому вы, вероятно, захотите изменить его размер теперь, когда у него больше контента.

Answer 3

Для DIV, который содержит классы «маленькие-6 больших в центре колонны» должен иметь CSS, как

display: inline-blcok; 

Либо вы можете добавить новый класс, чтобы добавить выше CSS или вы можете сделать использование inline для этого div.

И для изображения необходимо обновить следующий css.

.il img{ 
    vertical-align: top; 
}