Question

application.scss

中的

.message-sent {
  position: relative;
  background-color: #FFFF00;
  border-color: #BCE8F1;
  margin: 5px 20px;
  padding: 10px;
  float: right;
}


.message-received {
  background-color: #F1F0F0;
  border-color: #EEEEEE;
  margin: 5px 20px;
  padding: 10px;
  float: left;
}

在view / messages / _message.html.erb
中
<li> <div class="row"> <div class="<%= user.id == message.user_id ? 'message-sent' : 'message-received' %>"> <%= message.body %> </div> </div> </li>

在view / conversations / _conversation.html.erb
中
<li> <div class="panel panel-default" data-conversation-id="<%= conversation.id %>"> <div style="font-size: 15px; height: 30%;" class="badge badge-pill badge-success"> <%= link_to conversation.opposed_user(user).nickname, '', class: 'toggle-window' %></div> <%= link_to "x", close_conversation_path(conversation), class: "btn btn-default btn-xs pull-right", remote: true, method: :post %> <div class="panel-body" style="display: none;"> <div class="messages-list"> <ul> <%= render 'conversations/conversation_content', messages: conversation.messages, user: user %> </ul> </div> <form class="new_message"> <input name="conversation_id" type="hidden" value="<%= conversation.id %>"> <input name="user_id" type="hidden" value="<%= user.id %>"> <textarea name="body" class="form-control"></textarea> <input style="font-size: 13px; height: 30%;" type="submit" class="btn btn-warning" value="전송"> </form> </div> </div> </div> </li>

* 我从rails到actioncable进行了实时聊天。我在聊天窗口的右侧发送消息。我希望接收消息显示在左侧。在教程中它是可能的。但它不会出现在我的项目中所有聊天都出现在左侧。它似乎不是scss的问题。如果您修改scss中的颜色是正确的如果您需要其他代码，请通过评论告诉我。*

错误页面中的Chrome浏览器（F12）

<!DOCTYPE html> <html> <head> <title>Univ. Community Prototype</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="UNQR3pfc6IF9oi+Wp3fgdvvJSJNQ1AXgrX6R1uroKEtyVyJqyOLxCQ+WEp9wPfca0xfz9DDsOIO9rOMAQ0kfTw==" /> <link rel="stylesheet" media="all" href="/assets/application.self-607424cb77179d6e129430471baf980e5ad301867ac29c26b26d7212ad5f08ff.css?body=1" /> <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script> <script src="/assets/bootstrap.self-9acfc28c4d35348d353eb47afc72c287bc271ea4f7e8c9b05f2f9554ddc3f202.js?body=1"></script> <script src="/assets/bootstrap/util.self-5ae5b599fc2afe0f317696c5dfc0b51d6ce2ecb47d0341d1555b2fe971ada496.js?body=1"></script> <script src="/assets/bootstrap/alert.self-5a586b490b4c9332249b231956b361b852b128a0d82f7f08549f205bba1bfeb0.js?body=1"></script> <script src="/assets/bootstrap/button.self-30412f39aaa761313878531076ce8187fe6c017e42111bf2c283fce4a7c850f8.js?body=1"></script> <script src="/assets/bootstrap/carousel.self-f18afa468f85125228747ec83e00e56a26bbc71295e90a3848af25b258445615.js?body=1"></script> <script src="/assets/bootstrap/collapse.self-94c7455a70c5bb5ad5b3eae0c70388160c238afdea0b48d5345587fd176fb52d.js?body=1"></script> <script src="/assets/bootstrap/dropdown.self-954f8384ac380992dd91b2b176b570b0792365a334efb758774c718d9628a329.js?body=1"></script> <script src="/assets/bootstrap/modal.self-a406636221efb5add01fbaa60c24ac0ae6bc0c57008d8e2503d68f49fbe75ad0.js?body=1"></script> <script src="/assets/bootstrap/scrollspy.self-66781adda319363e67c65edfc73459411bd3948c0f32efddbc9928b810d5abf4.js?body=1"></script> <script src="/assets/bootstrap/tab.self-e3abc2817f699a2be95f78a4aff190ef7669d5590adbacd0c08867eb34ed16c6.js?body=1"></script> <script src="/assets/bootstrap/tooltip.self-dd8a9f3fa1f9fc58df30c7ed9a17dfc7303b812d72640899beee03609124b426.js?body=1"></script> <script src="/assets/bootstrap/popover.self-7d459fac34d4d96fd9d6da8efcd40dee55b66579a24ddcebf0a355c82dcad7e0.js?body=1"></script> <script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1"></script> <script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script> <script src="/assets/tinymce/preinit.self-78bfc36da60c92b71799c55e0d8c68780f19caf3cf4e4e0e3bca8c9014a0d83d.js?body=1"></script> <script src="/assets/tinymce/tinymce.self-b5596bc02a735dc0e7ad551e4a88ecf812f3ab6a8f4355441b3481d869393199.js?body=1"></script> <script src="/assets/tinymce.self-75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070.js?body=1"></script> <script src="/assets/tinymce/jquery.tinymce.self-c4e34b289f498e7a8e4ff16c48b895310113eae7c296ac5f17680704bc3a0032.js?body=1"></script> <script src="/assets/tinymce-jquery.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1"></script> <script src="/assets/bulletins.self-2abc19c26ebbf605174fbef79b9fbc2861869c60e15935e80dffcad48cabad9f.js?body=1"></script> <script src="/assets/action_cable.self-be3674a79bb9d13d41d259b2c17fad23aef20946dab3603b9d02374ea795005f.js?body=1"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script> <script src="/assets/channels/conversation.self-cff6155dee216e5740d8b35a8bf334e29e4397a573cf1c5e28f292e5c0f95032.js?body=1"></script> <script src="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script> <script src="/assets/home.self-19a187bec6cdb96d6de80a61c16c857c613536adf9138476bd367db38d282635.js?body=1"></script> <script src="/assets/knu.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script> <script src="/assets/likes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script> <script src="/assets/members.self-19a187bec6cdb96d6de80a61c16c857c613536adf9138476bd367db38d282635.js?body=1"></script> <script src="/assets/messages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script> <script src="/assets/posts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script> <script src="/assets/reports.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script> <script src="/assets/talks.self-19a187bec6cdb96d6de80a61c16c857c613536adf9138476bd367db38d282635.js?body=1"></script> <script src="/assets/application.self-1915efa258d754c8135929322b965317324ccca7ec8d68cc7c42e5f9019e998a.js?body=1"></script>  <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/drop-down.js"></script>  <meta property="og:image" content="/img/op_thum.png">  <link rel="stylesheet" href="/css/image-box.css"> <link rel="stylesheet" href="/css/customize.css"> <script type="text/javascript" src="/js/count_down.js"></script>  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/bootstrap.css"> <link rel="stylesheet" href="//v4-alpha.getbootstrap.com/assets/css/docs.min.css">  <link rel="stylesheet" type="text/css" href="/css/header_menu.css"> <script src="/js/highlight.min.js"></script> <script src="/js/tether.min.js"></script> <script src="/js/theme.min.js"></script> </head> <body style="margin: 0px 0px 0px 0px"> <div class="header">  <nav class="navbar navbar-inverse bg-transparent navbar-toggleable-md fixed-top" role="navigation"> <div class="container no-override"> <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-collapse"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="/"><img style="width: 150px;" src="/img/logo.png" alt="Logo" /></a> <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="/bulletins">카테고리 설정</a></li> <li class="nav-item dropdown"> <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">게시판 <i class="fa fa-angle-down" aria-hidden="true" style="font-size: 15px;"></i></a> <div class="dropdown-menu" role="menu"> <a class="dropdown-item" href="/bulletins/1/posts">자유게시판</a> <a class="dropdown-item" href="/bulletins/2/posts">피드백 게시판</a> </div> </li> <li class="nav-item"><a class="nav-link" href="/home/update">Admin</a></li> <li class="nav-item"><a class="nav-link" href="/home/git"><i class="fa fa-github-alt" aria-hidden="true" style="font-size: 15px;"></i> Git!</a></li> <li class="nav-item"><a class="nav-link" href="#">장식메뉴2</a></li> <li class="nav-item"><a class="nav-link" href="/talks/index">쪽지함가기</a></li> <li class="nav-item"><a href="/users/edit" class="nav-link board_nickname_etc"><i class="fa fa-id-card-o" aria-hidden="true" style="font-size: 15px;"></i> 나야나</a></li> <li class="nav-item"><a class="nav-link nav-link--rounded" data-method="delete" href="/users/sign_out">로그아웃</a></li> </ul> </div> </div> </div> </nav>  <div class="board" style="background: url('/img/title_img_1.png') no-repeat center center/cover scroll;"><span style="color: white; background:rgba(0,0,0,0.6); padding: 10px; border-radius: 10px;"></span></div> <div class="row"> <div class="col-md-9"> <ul id="conversations-list"> <span style="height: 40%;" class="badge badge-pill badge-info"> </span> : 아이디를 누르면 채팅창이 열립니다. <li> <div class="panel panel-default" data-conversation-id="2"> <div style="font-size: 15px; height: 30%;" class="badge badge-pill badge-success"> <a class="toggle-window" href="">선풍기</a></div> <a class="btn btn-default btn-xs pull-right" data-remote="true" rel="nofollow" data-method="post" href="/conversations/2/close">x</a> <div class="panel-body" style="display: none;"> <div class="messages-list"> <ul> <li> <div class="row"> <div class="message-sent"> sadsd </div> </div> </li> </ul> </div> <form class="new_message"> <input name="conversation_id" type="hidden" value="2"> <input name="user_id" type="hidden" value="3"> <textarea name="body" class="form-control"></textarea> <input style="font-size: 13px; height: 30%;" type="submit" class="btn btn-warning" value="전송"> </form> </div> </div> </li> <span style="height: 40%;" class="badge badge-pill badge-info"> </span> : 아이디를 누르면 채팅창이 열립니다. <li> <div class="panel panel-default" data-conversation-id="3"> <div style="font-size: 15px; height: 30%;" class="badge badge-pill badge-success"> <a class="toggle-window" href="">냉장고</a></div> <a class="btn btn-default btn-xs pull-right" data-remote="true" rel="nofollow" data-method="post" href="/conversations/3/close">x</a> <div class="panel-body" style="display: none;"> <div class="messages-list"> <ul> <li> <div class="row"> <div class="message-sent"> asdsad </div> </div> </li> <li> <div class="row"> <div class="message-sent"> 하하하 </div> </div> </li> </ul> </div> <form class="new_message"> <input name="conversation_id" type="hidden" value="3"> <input name="user_id" type="hidden" value="3"> <textarea name="body" class="form-control"></textarea> <input style="font-size: 13px; height: 30%;" type="submit" class="btn btn-warning" value="전송"> </form> </div> </div> </li> </ul> </div> <div class="col-md-3"> <h3 class="alert alert-success" role="alert">쪽지 보내기</h3> <div class="alert alert-warning" role="alert"> <ul> <div><li><span style="font-size: 13px;" class="badge badge-pill badge-success"><a data-remote="true" rel="nofollow" data-method="post" href="/conversations?user_id=1">선풍기</a></span></li></div> <div><li><span style="font-size: 13px;" class="badge badge-pill badge-success"><a data-remote="true" rel="nofollow" data-method="post" href="/conversations?user_id=2">냉장고</a></span></li></div> <div><li><span style="font-size: 13px;" class="badge badge-pill badge-success"><a data-remote="true" rel="nofollow" data-method="post" href="/conversations?user_id=4">Sjeisjd</a></span></li></div> </ul> </div> <span class="badge badge-pill badge-info"> </span> : 닉네임을 누르면 메세지를 전송할 수 있습니다. </div> </body> </html>

Answer 1

可以使用某些HTML修复此问题。只需把它放在两个浮动下面：

<your right float div>
<your left float div>
<div style="clear: both;"></div>

HTML / CSS - （浮动：左）不起作用

1 个答案: