获得2个div，它们并排呈现部分

Question

我无法获得两个包含渲染部分的div在一个表单中并排放置。如果我用正常文本替换div ，它们会响应我的样式更改，但是如果我将渲染代码放入，那么它们就不会让步：

<div class="form">

      <%= form_for(@newevent) do |f| %>

          ...

          <div>
            <h2>Who's involved?</h2>

            <div class = 'sidebyside'>
                <div id = "left-calendar-wrapper">
                   <%= render partial: '/calendars/show', locals: {} %>
                </div>

                <div id ="right-calendar-wrapper">
                     this gets filled in by a javascript render in a js.erb file
                </div>
            </div>


          </div>

...
</div>

这是我目前的CSS：

.sidebyside {
  float: left;
}

#left-calendar-wrapper {
  float: left;

}

是否可以使用渲染的部分来完成此操作？我很感激你的帮助。

Answer 1

简单明了的解决方案：

您可以使用 bootstrap 库来格式化html。你基本上会有这个代码

<div class='row'>
  <div class='col-md-6' id='left-calendar-wrapper'></div>
  <div class='col-md-6' id='right-calendar-wrapper'></div>
</div>

您可以深入了解文档here。

Answer 2

您的代码中存在错误：

<div class = sidebyside>

应该是

<div class="sidebyside">

也许这已经是你问题的解决方案了。如果没有，请告诉我。