首页 \ 问答 \ 如何从M2O到O2O追溯关系？(How follow a relationship backward from a M2O to O2O?)

如何从M2O到O2O追溯关系？(How follow a relationship backward from a M2O to O2O?)

 UserProfile具有一对一的'用户'和多对一的Place 
 

class UserProfile( models.Model ) :
    user  = models.OneToOneField( User )
    place = models.ForeignKey( Place, null = True, blank = True )

 

 在我的Place详细视图中，我想列出所有那个Place的居民 。 换句话说，我想列出所有User的UserProfile具有指定的Place 。 
 

 在我的模板中，我尝试了 
 

{% for resident in place.user_profile_set.user_set.all %}

 

 但那并不奏效。 我想我在Django的“追溯一段关系”的概念中从根本上失去了一些东西？ 

The UserProfile has a one-to-one to 'User' and a many-to-one to Place
 

class UserProfile( models.Model ) :
    user  = models.OneToOneField( User )
    place = models.ForeignKey( Place, null = True, blank = True )

 

In my the detail view of Place, I want to list all the residents for that Place. In other words, I want to list all Users, whose UserProfile had the specified Place.
 

In my template, I tried
 

{% for resident in place.user_profile_set.user_set.all %}

 

But that didn't work. I guess I am missing something fundamentally in Django's concept of "following a relationship backwards"?

原文：https://stackoverflow.com/questions/9941276
更新时间：2022-08-12 14:08

最满意答案

 你可以尝试下面，一般来说这是一个避免列项被破坏的技巧。 
 

li {
  display: inline-block;
}

 

 

 
 
 
  
ul {
  column-count: 3;
}

li {
  display: inline-block;
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top .25s ease-in-out;
}

li:hover .hover {
  top: 0;
}

img {
  max-width: 100%;
}
 
  
<ul>
  <li><img src="https://dummyimage.com/400x50" alt=""></li>
  <li><img src="https://dummyimage.com/400x100" alt=""></li>
  <li>
    <img src="https://dummyimage.com/400x300" alt="">
    <div class="hover">Lorem ipsum dolor sit amet.</div>
  </li>
</ul>
 
 
 

 


You can try below, in general it's a trick to prevents column items to break.
 

li {
  display: inline-block;
}

 

 

 
 
 
  
ul {
  column-count: 3;
}

li {
  display: inline-block;
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top .25s ease-in-out;
}

li:hover .hover {
  top: 0;
}

img {
  max-width: 100%;
}
 
  
<ul>
  <li><img src="https://dummyimage.com/400x50" alt=""></li>
  <li><img src="https://dummyimage.com/400x100" alt=""></li>
  <li>
    <img src="https://dummyimage.com/400x300" alt="">
    <div class="hover">Lorem ipsum dolor sit amet.</div>
  </li>
</ul>

相关问答

更多

  • ：在Webkit上的css多列布局中悬停状态元素(:hover state element within css multi-column layout on Webkit)[2022-04-19]

    这肯定是一个错误，它似乎发生在有一个带有列和一些滚动的块时。 解决方法是将这些属性拆分为不同的块，因此包装器将具有滚动，内部块将具有列： http ： //codepen.io/kizu/pen/saItm .entry-wrapper { overflow-y: hidden; overflow-x: auto; } （当然，从列中删除那些样式的列）然后
    …

  • 悬停效果低于绝对位置(Hover Effect Below Position Absolute)[2024-03-04]

    如果你坚持要将锚点与图像分开，那就确定了。 JavaScript解决方案： function HoverOverImage() { alert("Hello"); } function HoverOverAnchor() { //Do the stuff you want //Execute the other function HoverOverImage(); }

    CSS3：转换悬停和动画旋转错误(CSS3: Transition hover and animation rotation bug)[2022-06-23]

    您只能在一个元素上一次应用一个转换规则。 如果你想旋转和缩放一个元素，我建议旋转父元素并缩放元素本身。 #homeMim { position: absolute; height: 200px; -webkit-animation: spin 40s linear infinite; -moz-animation: spin 40s linear infinite; animation: spin 40s linear infinite; } #h ...

  • Safari：CSS多列悬停错误与绝对位置？(Safari: CSS Multi-column hover bug with absolute position?)[2024-03-05]

    你可以尝试下面，一般来说这是一个避免列项被破坏的技巧。 li { display: inline-block; } ul { column-count: 3; } li { display: inline-block; position: relative; } .hover { background-color: rgba(0, 0, 0, .5); bottom: 0; color: #fff; left: 0; overflow: ...

  • 使用CSS“剪辑”的Safari渲染错误(Safari rendering bug with CSS “clip”)[2022-02-21]

    很有意思。 我想我找到了答案，但它涉及到一个webkit只有黑客。 这让我感到有些but but，但希望这仍然符合法案。 针对裁剪/渲染问题，我偶然发现了一个关于背景位置和固定位置元素的SO问题 - 答案中提到了-webkit-mask-image作为clip: auto的唯一webkit替代方案。 它也适用于你 - 只需添加下面的CSS就可以让Safari快乐起来： @media screen and (-webkit-min-device-pixel-ratio:0) { .rowcontaine ...

  • 为什么隐藏的可见性必须在css中添加绝对位置？(Why the visibility hidden must add position absolute in css?)[2023-12-07]

    这与visibility: hidden;之间的差异有关visibility: hidden; 并说display: none; visibility: hidden; 隐藏元素，但它仍占用布局中的空间。 display: none; 从文档中完全删除元素。 它不占用任何空间，即使它的HTML仍在源代码中。 position: absolute; 该元素完全从正常流程中移除。 This is to do with the difference between visibility: hidden; and ...

  • 当使用位置为绝对的li时，IE8不会悬停(IE8 does not hover when using an li with position:absolute)[2023-11-23]

    Internet Explorer在处理时遇到一些问题：悬停事件，尤其是li元素。 你需要使用这个： http ： //www.xs4all.nl/~peterned/csshover.html 应该适合你。 如果所有其他方法都失败了，在我的情况下，我使用jQuery的hoverIntent来可靠地显示菜单。 Internet Explorer has some problems with dealing with :hover events, especially for li elements. You ...

  • 多列表下拉绝对位置相互上下？(Multi list drop down absolute position over and under one another?)[2023-07-05]

    您已将#cat2标记为position:absolute但未指定任何位置。 尝试添加此行： #cat2 { position:absolute; display:block; margin: 10px 10px 10px 19px; padding: 10px; border: 2px solid black; width: 200px; z-index:100; top:100px; /* --This line --*/ } 这个Work ...

  • 列内的绝对位置(Absolute position inside column)[2023-08-16]

    尝试改变你的风格。 输出可能是您寻找的结果。 我将位置从绝对更改为固定，尝试读取位置的不同值... CSS布局 - 位置属性 Try to change your style to this. The output maybe the result your looking for.