Is there a way to have elements be positioned to the right without removing them from the flow?

问题

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?

回答1:

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.

回答2:

When you float elements the parent's height is not calculated. Either you can use the clearfix class, or you can clear floats using the overflow property.

You can also add <div style="clear:both;"></div> at the end of your parent div, however this is less semantic the the above solutions.

However, what you choose to use is really a personal preference.

Also you might want to try using a grid system. You can try 960 or Bootstrap.

回答3:

You need to clear out your floating elements like this :

<div style="clear: both;"></div>

My Fiddle

If you dont-clear it'll be like this : My Fiddle (Floats not cleared)

回答4:

For the record, there is a better (at least in my eyes) way of doing this than float-happy clearfixing. Use display: inline-block. The downside? IE7 doesn't support it (of course). The below works, though, in IE8 and above and Chrome, Firefox and Opera.

NOTE: I've simplified the demo's CSS in an attempt to dispel perceptions this is complicated. It's not. The display: inline-block is the only part you need; the rest is part of the attempt to match what the OP described in the question's depiction.

<div id="container">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>

#container {
    background: #ddd;
    text-align: center;
}
#container > div {
    background: #cff;
    display: inline-block;
    padding: 2%;
    height: 100px;
    width: 25%;
}
#container #a {
    height: 30px;
    margin: 0 10% 0 0;
}

http://jsfiddle.net/AZJzz/4

回答5:

Place this line after it:

<div style="clear:both;"></div>

This should extend the div they are in to fit around them.

Here's a live demo, to illustrate how to do it.

回答6:

Currently floats are probably the only way to get the desired result. You can also float the parent container, but then you'll then have to give it a width. This method can quickly lead to a 'float everything' layout, but it works. http://jsfiddle.net/mjzNP/

来源：https://stackoverflow.com/questions/11709501/is-there-a-way-to-have-elements-be-positioned-to-the-right-without-removing-them

标签

html

css

css-float