Question

我正在使用Rails4构建原型。我做了以下custom.css.scss：

// System wide CSS

html {
    background-color: gray;
    margin: 5px;
    padding-left: 10px;
    padding-top: 2px;
  height: auto;
}

body {
    margin: 10px;
    border-radius: 15px;
    padding: 10px;
  height: auto;
}

img {
    align: left;
    border: 2px white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.profile_image {
    float: left;
    padding-right: 10px;
}

.col1of3,  .col2of3, .col3of3 {
  width: auto;
  float: left;
  margin: 5px;
}

我的问题是如何显示列。在此视图中很好，因为我没有使用columns： good views

但是这个我使用columns身体元素的页面似乎更短，而且长度元素更大：bad views http://media.screensteps.me/atmosx/ycqaqc/css3-problem.png?1399409643

我知道问题与视图有关。这是我的edit.html.erb：

<h1>Προσθήκη Ασθενούς</h1>

<%= render 'form' %>

<%= link_to 'Πίσω', patients_path %>

这是我的_form.html.erb：

<%= form_for(@patient) do |f| %>
  <% if @patient.errors.any? %>
    <div id="error_explanation">
      <h2>Σφάλμα κατά την διαδικασία αποθήκευσης: </h2>

      <ul>
      <% @patient.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="col1of3">
    <div class="fieldset">
      <%= f.label "Όνομα" %><br>
      <%= f.text_field :name %>
    </div>
    <div class="fieldset">
      <%= f.label "Επώνυμο" %><br>
      <%= f.text_field :surname %>
    </div>
    <div class="fieldset">
      <%= f.label "Φύλο" %><br>
      <%= f.select :gender, options_for_select(list_genders)%>
    </div>
    <div class="fieldset">
      <%= f.label "Ημερομηνία Γεννήσεως" %><br>
      <%= f.date_select :birthday, :start_year => 1920, :use_month_names => ['Ιανούριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιο', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος','Δεκέμβριος'] %>
    </div>
    <div class="fieldset">
      <%= f.label "Εικόνα" %><br>
      <%= f.text_field :image_url %>
    </div>
    <div class="fieldset">
      <%= f.label "ΑΜΚΑ" %><br>
      <%= f.text_field :social_security_number %>
    </div>
  </div>
  <div class="col2of3">
    <div class="fieldset">
      <%= f.label "Οργανισμός Ασφάλισης" %><br>
      <%= f.select :social_security_institution, options_for_select(list_greek_sso) %>
    </div>
    <div class="fieldset">
      <%= f.label "Αρ Οργαν Ασφάλισης" %><br>
      <%= f.text_field :social_security_institution_number %>
    </div>
    <div class="fieldset">
      <%= f.label "ΑΦΜ" %><br>
      <%= f.text_field :afm %>
    </div>
    <div class="fieldset">
      <%= f.label "Τηλ οικίας" %><br>
      <%= f.text_field :home_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Τηλ εργασίας" %><br>
      <%= f.text_field :work_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Κινητό" %><br>
      <%= f.text_field :mobile_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Πατρώνυμο (του)" %><br>
      <%= f.text_field :father_name %>
    </div>
  </div>
  <div class="col3of3">
    <div class="fieldset">
      <%= f.label "Διεύθυνση Οικίας" %><br>
      <%= f.text_field :home_address %>
    </div>
    <div class="fieldset">
      <%= f.label "Πόλη" %><br>
      <%= f.text_field :city %>
    </div>
    <div class="fieldset">
      <%= f.label "Χώρα" %><br>
      <%= f.text_field :country, :value => 'Ελλάδα' %>
    </div>
    <div class="fieldset">
      <%= f.label "Ταχυδρομικός Κώδικας" %><br>
      <%= f.text_field :postal_code %>
    </div>
    <div class="fieldset">
      <%= f.label :email %><br>
      <%= f.text_field :email %>
    </div>
    <div class="fieldset">
      <%= f.label "Σημειώσεις" %><br>
      <%= f.text_area :notes, cols: "50", rows: "8" %>
    </div>
    <div class="actions">
      <%= f.submit "Υποβολή" %>
    </div>
  </div>
<% end %>

知道为什么列的元素在<body>标记之外的行为？

由于

Answer 1

我认为这是因为浮动属性。在_form.html.erb的最后，考虑在<% end %> -

之前插入以下内容

<div style="clear: both;"/>

这清楚了吗？

使用twitter的bootstrap和Rails4渲染列

1 个答案: