问题
How can I modify this:
<div style="border: solid 1px red; text-align: center">
<div style="background-color: yellow; float: left">left</div>
middle
<div style="float:right; background-color: yellow">right</div>
</div>
So that "right" is in line vertically with "left"?
Here's what my bad css looks like rendered:
left middle
right
thanks!
回答1:
If you use a ‘float: right’, make it the first thing on the line:
<div style="border: solid 1px red; text-align: center">
<div style="float:right; background-color: yellow">right</div>
<div style="background-color: yellow; float: left">left</div>
middle
</div>
Otherwise it always falls into the next text line.
but why!!!!!
(1) Because once you've started putting static text on a line, you've got an indeterminate width to fit a floated element into. Say you wrote:
abc abc abc <div style="float: left">xyz xyz</div> abc abc abc
Now imagine you start resizing that window down so that “abc abc abc” just fits on the first line. Now you meet a float, and try to include it on the line you're on. But it doesn't fit: to fit it on, you'd have to have “abc xyz xyz” on the line, reflowing the remaining “abc” to the next line. But! Now you've moved the float's insertion point down a line, so the float has to drop down a line too. But! Now the first line isn't wrapped properly, because there's room for three “abc”s, but the line has been ended prematurely to make way for a float that actually occurs further down the page...
The CSS standard solves this logical impasse by making a float on a line with inline text before it wait for the next line.
(2) Because that's what Netscape did with <img float="right">
many, many years ago.
回答2:
I got what you need*:
<table style='border: 1px solid red; width: 100%; border-collapse: collapse;'>
<tr>
<td style='background-color: yellow; width: 25%;'>left</td>
<td style='text-align: center;'>middle</td>
<td style='background-color: yellow; width: 25%; text-align: right;'>right</td>
</tr>
</table>
Thank me later!
*
disclaimer: I am only 95% serious.
回答3:
This works without re-arranging the order of the content
<style type="text/css">
.column
{
float: left;
width:33.3%;
}
#container
{
text-align: center;
width:100%;
}
.clearfix
{
display: inline-block;
}
</style>
<div id="container" class="clearfix">
<div class="column">left</div>
<div class="column">middle</div>
<div class="column">right</div>
</div>
You can also drop the 33% and make them representative of your design, or even do a fixed width on the columns. In that cause, use IDs instead of classes.
回答4:
Make middle
a div
, float it to the left and specify widths for all three containers. Also, you migth make the surrounding div
overflow: auto
, else it will collapse on itself.
回答5:
You're talking about the "holy grail" as in this A List Apart article
回答6:
3 column layout generator
回答7:
"middle" needs to be in a div of its own or can throw off your display
回答8:
Try something of the sort:
<div style="border: solid 1px red; text-align: centerl width:100px">
<div style="background-color: yellow; float: left; width:30px">left</div>
<div style="background-color: yellow; float: left; width:30px">middle</div>
<div style="background-color: yellow; float: left; width:30px">right</div>
</div>
回答9:
Updated:
<div style="border: solid 1px red; text-align: center">
<div style="background-color: yellow; float: left">left</div>
<div style="float:right" background-color: yellow">right</div>
<div style="float:none">middle</div>
</div>
回答10:
To accomplish what you're trying to do, you should put the right column before the middle column.
<div style="border: solid 1px red; text-align: center">
<div style="background-color: yellow; float: left">left</div>
<div style="float:right; background-color: yellow">right</div>
middle
</div>
Because the right column is positioned relatively to its context which is a line below the middle content.
来源:https://stackoverflow.com/questions/533607/css-three-column-layout-problem