有没有办法让元素定位到正确的，而不从流中删除它们？ [英] Is there a way to have elements be positioned to the right without removing them from the flow?

问题描述

我有一个div，里面有一些内联元素。我想将其中一个元素放在左边，其余的在右边：

  + ------ --------------------- + 
 | + ---- + + ----- + + ----- + | 
 || A | | B | | C || 
 | + ---- + | | | || 
 | | | | || 
 | | | | || 
 | + ----- + + ----- + | 
 + --------------------------- + 
  

我尝试在BC和C上使用 float：right ，但是从流中删除它们，使它们脱离容器：

  + ------------------------ --- + 
 | + ---- + + ----- + + ----- + | 
 || A | | B | | C || 
 | + ---- + | | | || 
 + ------------ | |  -  | | + 
 | | | | 
 + ----- + + ----- + 
  

编辑：大多数答案似乎建议使用溢出自动或清除。它们之间有什么区别？我如何选择一个？此外，每个人似乎都假设我需要浮动元素。

解决方案

一个简单的解决方案是添加 overflow：auto 到容器，以解决这个问题。这将导致容器展开以包含其浮动，但如果由于某种原因某人为该容器另外设置了一个小高度，将出现滚动条。

还有其他替代方法也可以工作，在其他情况下可能更好。请参阅此问题及其第二个答案，以便了解问题的概述。 / p>

I have a div with some inline elements inside it. I want to put one of the elements on the left and the rest over on the right:

+---------------------------+
|+----+      +-----+ +-----+|
|| A  |      |  B  | |  C  ||
|+----+      |     | |     ||
|            |     | |     ||
|            |     | |     ||
|            +-----+ +-----+|
+---------------------------+

I tried using float:right on BC and C but that removes them from the flow, making them stand out of the container:

+---------------------------+
|+----+      +-----+ +-----+|
|| A  |      |  B  | |  C  ||
|+----+      |     | |     ||
+------------|     |-|     |+
             |     | |     |
             +-----+ +-----+

What are the best alternatives for putting things over on the right without having them spill out of the outer container?

EDIT: Most answers seem to suggest either using overflow-auto or clear. What is the difference between them? How do I choose one over the other? Also, everyone seems to assume that I need to float the elements. Is float the only way to put things over on the right?

解决方案

One simple solution is to add overflow:autoto the container in order to solve this. This will cause the container to expand to contain its floats but will make scrollbars appear if for some reason someone additionally sets a small height for the container.

There are also other alternatives that also work and might be better in other cases. See this question and its second answer for a good overview on the problem.

这篇关于有没有办法让元素定位到正确的，而不从流中删除它们？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！