请看下图:
我当前的用户界面:/image/9dlyJ.png
我有一个类(class),<div class="newsfeed">
它修改了创建的每个帖子。
我遇到的问题是我想修改“编辑”和“删除”字形按钮而不影响类(class)的其他部分。具体来说,我想将它们都移到帖子的右上角。
现在,我知道我可以创建一个单独的类(或 ID);但是,类(class)如何知道我引用的是新闻源类(class)?例如,如果我想将它们固定在右侧,它们怎么知道要固定在框的右侧而不是页面的右侧?
非常感谢所有帮助。任何可以向我提供所需 CSS 的人都会得到巨额奖金。 :)
谢谢大家!
编辑 - 下面是我的 View 中包含的所有当前代码:
<% if @posts.any? %>
<% @posts.each do |post| %>
<div id="post_<%= post.id %>">
<div class ="newsfeed">
<div class="well">
<% if post.user.has_image? %>
<div class="profile_pic"><%= image_tag post.user.images.first.file(:profile), class: "img-thumbnail", alt: "Cinque Terre", width: "50", height: "50" %></div>
<% else %>
<div class ="profile_pic"><%= image_tag "default_user_image.png",class: "img-thumbnail", alt: "Cinque Terre", width: "50", height: "50" %></div>
<% end %>
<div class="name_and_time">
<a href="/users/<%= post.user.id %>/show"><%= post.user.first_name %> <%= post.user.last_name %></a><br>
<span><%= post.created_at.strftime("%d %b %Y %H:%M") %></span>
</div>
<% if !post.image.exists? %>
<h2> <%= post.text %> </h2>
<% else %>
<h2> <%= link_to post.text, post_path(post) %> </h2>
<%= link_to post_path(post) do %>
<p><%= image_tag post.image.url(:medium) %></p>
<% end %>
<% end %>
<% if @user %>
<% if current_user.voted_up_on?(post) %>
<%= link_to "Like", dislike_post_path(post), method: :put %>
<% else %>
<%= link_to "Like", like_post_path(post), method: :put %>
<% end %>
<% end %>
<%= "#{post.get_upvotes.size} | " %>
<div class="edit_and_delete_posts">
<% if post.user == current_user %>
<%= link_to edit_post_path(post) do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
<%= link_to post_path(post), method: :delete do %>
<span class="glyphicon glyphicon-trash"></span>
<% end %>
</div>
<div class='comments_div'>
<%= render post.comments %>
</div>
<% if current_user %>
<%= form_for [post, post.comments.new ], remote: true do |f| %>
<%= f.text_area :text, placeholder: 'Add a comment' %>
<%= f.submit 'Comment' %>
<% end %>
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>
最佳答案
如果您发布完整编译的 HTML 和 CSS,我可以向您展示一个工作演示,但您需要添加的是:
.newsfeed {
position:relative;
}
.edit_and_delete_posts {
position:absolute;
top:0;
right:0;
}
通过将 position:absolute
添加到 .edit_and_delete_posts
div,它被拉出流程,因此它不会影响其余元素。然后你可以设置它的 top
和 right
位置;这将它设置到具有相对定位的最近祖先元素的右上角。因为 .newsfeed
有 position:relative
它是最近的祖先,并且因此 .edit_and_delete_posts
将相对于此定位。
然后,您可以根据需要添加额外的边距或填充以对其进行微调。
关于html - CSS:只修改类中的一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41080584/