CSS 按表格放置图像
CSS placing image by a form
我想要一张图片显示在表格的右边。这是我试过的。
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="✓" /><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'm interested!" class="button radius" />
</fieldset>
</form>
</div>
</div>
但是当您访问我的实时网站时,您会看到图片位于表格上方。我做错了什么? https://infinite-oasis-2303.herokuapp.com/investors/new
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| %>
这个div占据了整个宽度:
<div class="small-6 large-centered columns">
因此,即使使用 display:inline-块,它也会溢出到另一行。您需要做的是将 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="✓" /><input type="hidden" name="authenticity_token" value="n10HveoPkQJz0n5llHZgPO7hlgiUhoOgFWOfW28SoKn9/YwRtFLZC5+8bFl0Ywy0gOStDirJ+6gmLB7wHA==" />
在此之后,您还必须使表单 class new_investor 显示:inline-block。这应该将图像放在表格旁边。
在此之后,您可能还需要清理另外两件事:
- 你的 img 标签有 vertical-align: middle ,不知道是不是故意的
- 当您将 img 移入中间栏时,中间栏不会变大,因此现在您可能想要调整它的大小,因为它有更多内容。
对于包含 classes "small-6 large-centered columns" 的 div 需要 css 作为
display: inline-blcok;
您可以添加一个新的 class 来添加上面的 css,或者您可以使用内联 div。
并且对于图像,以下css需要更新。
.il img{
vertical-align: top;
}
我想要一张图片显示在表格的右边。这是我试过的。
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="✓" /><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'm interested!" class="button radius" />
</fieldset>
</form>
</div>
</div>
但是当您访问我的实时网站时,您会看到图片位于表格上方。我做错了什么? https://infinite-oasis-2303.herokuapp.com/investors/new
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| %>
这个div占据了整个宽度:
<div class="small-6 large-centered columns">
因此,即使使用 display:inline-块,它也会溢出到另一行。您需要做的是将 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="✓" /><input type="hidden" name="authenticity_token" value="n10HveoPkQJz0n5llHZgPO7hlgiUhoOgFWOfW28SoKn9/YwRtFLZC5+8bFl0Ywy0gOStDirJ+6gmLB7wHA==" />
在此之后,您还必须使表单 class new_investor 显示:inline-block。这应该将图像放在表格旁边。
在此之后,您可能还需要清理另外两件事:
- 你的 img 标签有 vertical-align: middle ,不知道是不是故意的
- 当您将 img 移入中间栏时,中间栏不会变大,因此现在您可能想要调整它的大小,因为它有更多内容。
对于包含 classes "small-6 large-centered columns" 的 div 需要 css 作为
display: inline-blcok;
您可以添加一个新的 class 来添加上面的 css,或者您可以使用内联 div。
并且对于图像,以下css需要更新。
.il img{
vertical-align: top;
}