Question

我有包含用户帖子的标签，在发布第二个状态后，所有内容都会脱离标签内容区域，使页面看起来非常糟糕。

以下是我在dashboard.html.erb中遇到错误的代码，

<ul class="tabs">
                            <li>
                                <input type="radio" checked name="tabs" id="tab1">
                                <label for="tab1">Profile</label>
                                    <div id="tab-content-1" class="tab-content animated fadeIn">
                                        <div class="panel panel-default-blue">  
                                        <%= form_for :post, url: posts_path do |f| %>
                                            <div class="panel-heading">
                                                <i class="fa fa-pencil-square"></i> <p class="status">Status</p> 
                                                <p class="divider-for-status">|</p>
                                            </div>
                                            <div class="panel-body">
                                                <%= f.text_area :body, placeholder: "What's new?" %>
                                            </div>
                                            <p> 
                                                <%= f.submit %>
                                            </p>

                                        <% end %>
                                        <% @posts.each do |post| %>
                                            <div class="panel panel-default">
                                                <div class="panel-heading-gray"> <%= image_tag @user.profile_picture.url(:thumb) %> <h5 class="user-name"><%= @user.name %></h5> <h6 class="time-posted"><%= post.created_at.strftime("%B, %d, %Y") %></h6>
                                                </div>
                                                    <div class="panel-body"><%= link_to post.body, post %></div>
                                                        <div class="panel-footer"> 
                                                        <h5>Add a comment:</h5>                                     <p class="Like-option">Like ·</p>
                                                            <p class="comment-form">Comment - </p>  
                                                            <p class="view-option">· View</p>
                                                            <p class="comment-profile-picture">
                                                            <%= image_tag @user.profile_picture.url(:thumb) %>
                                                            </p>
                                                            <div class="comments-stream">


                                                            </div>

                                                            <div id="comments-form">

                                                            </div>  
                                                        </div> 
                                                </div>
                                            </div>
                                     </div>
                            </li>

这是这些dashboard.css.scss的css，

.tabs input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
      .tabs {
        width: 650px;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 12px auto;
        box-shadow: 1.5px 1px rgba(0, 0, 0, 0.3);
      }
      .tabs li{
        float: left;
      }
      .tabs label:hover {
        background: rgba(255,255,255,0.5);
        top: 0;
      }
      .tabs label {
          display: block;
          padding: 10px 20px;
          border-radius: 2px 2px 0 0;
          color: #08C;
          font-size: 15px;
          font-weight: normal;
          font-family: 'Lily Script One', helveti;
          background: rgba(255,255,255,0.2);
          cursor: pointer;
          position: relative;
          top: 3px;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
      }


       [id^=tab]:checked + label {
        background: #08C;
        color: white;
        top: 0;
      }

      [id^=tab]:checked ~ [id^=tab-content] {
          display: block;
      }


.tab-content-1 {
        z-index: 2;
        display: none;
        text-align: left;
        height: auto;
        line-height: 140%;
        padding-top: 10px;
        background: white;
        padding: 15px;
        position: absolute;
        top: 53px;
        left: 0;
        box-sizing: border-box;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        box-shadow: 1.5px 1px 25px rgba(0, 0, 0, 0.3);
        margin-top: -12px;
      }

我会发布您可能需要查看的任何其他代码甚至更多细节，我感谢您的帮助！

Answer 1

有几个格式错误。此代码更正了这些。我没有尝试超越那个问题。

<ul class="tabs">
  <li>
    <input type="radio" checked name="tabs" id="tab1">
    <label for="tab1">Profile</label>

    <div id="tab-content-1" class="tab-content animated fadeIn">
      <div class="panel panel-default-blue">
        <%= form_for :post, url: posts_path do |f| %>
            <div class="panel-heading">
              <i class="fa fa-pencil-square"></i>

              <p class="status">Status</p>

              <p class="divider-for-status">|</p>
            </div>
            <div class="panel-body">
              <%= f.text_area :body, placeholder: "What's new?" %>
            </div>
            <p>
              <%= f.submit %>
            </p>

        <% end %>
        <% @posts.each do |post| %>
            <div class="panel panel-default">
              <div class="panel-heading-gray"> <%= image_tag @user.profile_picture.url(:thumb) %>
                <h5 class="user-name"><%= @user.name %></h5>
                <h6 class="time-posted"><%= post.created_at.strftime("%B, %d, %Y") %></h6>
              </div>
              <div class="panel-body"><%= link_to post.body, post %></div>
              <div class="panel-footer">
                <h5>Add a comment:</h5>

                <p class="Like-option">Like ·</p>

                <p class="comment-form">Comment - </p>

                <p class="view-option">· View</p>

                <p class="comment-profile-picture">
                  <%= image_tag @user.profile_picture.url(:thumb) %>
                </p>

                <div class="comments-stream">


                </div>

                <div id="comments-form">

                </div>
              </div>
            </div>
        <% end %>
      </div>
    </div>
  </li>
</ul>

物品溢出我的div

1 个答案: