CSS 如果 HTML 位于内容之后，如何向上推右浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14748232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I push a right float up, if its HTML is after the content's?
提问by Cristian
I have a mostly fixed 2-column layout:
我有一个大部分固定的 2 列布局：
- 1st column that takes as much space as it needs
- and the 2nd column that has a fixed width and is floated to the right
- 需要尽可能多的空间的第一列
- 和具有固定宽度并向右浮动的第二列
I want to make it a responsive design, so in smaller screen sizes, the 2nd column ends below the 1st column. This means that the HTML for the 2nd column has to be after the 1st column.
我想让它成为响应式设计，因此在较小的屏幕尺寸中，第二列在第一列下方结束。这意味着第二列的 HTML 必须在第一列之后。
My problem is that I can't seem to float the right column properly when using that mark-up. It ends up floated, but is below the main content.
我的问题是，在使用该标记时，我似乎无法正确浮动右列。它最终浮动，但低于主要内容。
Here's a sample code:
这是一个示例代码：
HTML:
HTML：
<div class='content'>
sdaohdosahdaf
<br />adfafhaskldjs sgdafadkfjas
<br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
daobfhaohfasod agsdjfa
<br />sidjaofhad
<br />sojghfadpfjas
</div>
CSS:
CSS：
.content {
background-color: lightblue;
margin-right: 120px;
}
.sidebar {
float: right;
width: 120px;
background-color: lightgreen;
}
JS fiddle here: http://jsfiddle.net/zinkkrysty/U3fA8/
JS小提琴在这里：http: //jsfiddle.net/zinkkrysty/U3fA8/
I tried also using negative margins, but can't seem to do it.
我也尝试使用负边距，但似乎无法做到。
If you have any other approaches to my problem (except setting a width on the first column), please give it a go
如果您对我的问题有任何其他方法（除了在第一列上设置宽度），请试一试
采纳答案by Cristian
Put them into a parent and set the position of the side bar as absolute, then use a different set of styles for the responsive display
将它们放入父级并将侧边栏的位置设置为绝对，然后为响应式显示使用一组不同的样式
html
html
<div class="parent">
<div class='content'>
sdaohdosahdaf
<br />adfafhaskldjs sgdafadkfjas
<br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
</div>
<div class='sidebar'>
daobf haohf asod agsdjfa
<br />sidja ofhad
<br />sojgh fadpfjas
</div>
</div>
css
css
.parent {
position: relative;
}
.content {
background-color: lightblue;
margin-right: 120px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
width: 120px;
background-color: lightgreen;
}
/* Responsive bit */
@media only screen and (max-width: 320px) {
.content {
background-color: orange;
margin-right: 0px;
}
.sidebar {
background-color: red;
position: relative;
width: 100%;
}
}
回答by Ali Bassam
Let the first divhave a position:absolute;and with left:0px;and the desired rightyou can have a fixed floated right div with a dynamic floated left div.
让第一个 div有一个position:absolute;andleft:0px;和right你想要的你可以有一个固定的浮动右 div 和一个动态浮动的左 div。
HTML
HTML
<div id="parentDiv">
<div id="leftDiv">
</div>
<div id="rightDiv">
</div>
</div>
CSS
CSS
#parentDiv
{
position:relative;
overflow:hidden;
}
#leftDiv
{
position:absolute;
left:0px;
top:0px;
right:200px; //Increase it if you want a little space between the 2 divs.
min-height:200px; // or bottom:0px; if you want a dynamic height
}
#rightDiv
{
width:200px;
float:right;
min-height:200px;
}
回答by Pandian
Try like below... it will help you...
像下面这样尝试......它会帮助你......
.content {
background-color: lightblue;
float: left;
}
.sidebar {
float: left;
width: 120px;
background-color: lightgreen;
}
I think you needed like this... Try the updated Fiddle : http://jsfiddle.net/U3fA8/1/
我认为你需要这样......尝试更新的小提琴：http: //jsfiddle.net/U3fA8/1/
回答by Kits
Try negative margins in %
尝试以 % 为单位的负边距
E.g. margin-top: -10%;
例如保证金最高：-10%；
回答by bot
Looking at your fiddle JUST ADD margin-top:-60px;in your .sidebar css and it will move up. Your css will look like this:
看着你的小提琴，只需添加 margin-top:-60px; 在你的 .sidebar css 中，它会向上移动。您的 css 将如下所示：
.content {
background-color: lightblue;
margin-right: 120px;
}
.sidebar {
float: right;
width: 120px;
margin-top:-60px;
background-color: lightgreen;
}
回答by P.T.
Building on @9205892's insight that you need another wrapper div, I've found that you avoid using absolute positioning (which can create problems with any content after the two columns), and still getting a responsive design. Just set the two sections to "float" and specify their widths (I just gave them percentages). Then in the responsive @mediasection, set the width of each section to 100% and the browser will put them one after the other.
基于@9205892的见解，您需要另一个包装器div，我发现您可以避免使用绝对定位（这可能会对两列之后的任何内容产生问题），并且仍然获得响应式设计。只需将两个部分设置为“浮动”并指定它们的宽度（我只是给了它们百分比）。然后在响应@media部分中，将每个部分的宽度设置为 100%，浏览器会一个接一个地放置它们。
HTML
HTML
<div class="parent">
<div class='content'>
sdaohdosahdaf
<br />adfafhaskldjs sgdafadkfjas
<br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
</div>
<div class='sidebar'>
daobf haohf asod agsdjfa
<br />sidja ofhad
<br />sojgh fadpfjas
</div>
</div>
CSS
CSS
.parent {
position: relative;
}
.content {
background-color: lightblue;
width: 60%;
float: left;
}
.sidebar {
top: 0px;
right: 0px;
width: 40%; /* 100% - .content.width */
float: left;
background-color: lightgreen;
}
/* Responsive bit*/
@media only screen and (max-width: 320px) {
.content {
background-color: orange;
width: 100%; /* Leave no room for sidebar */
}
.sidebar {
background-color: red;
width: 100%; /* Sidebar is puffed up */
}
}
Demo(based on the demos from the other answers)
演示（基于其他答案中的演示）
回答by devjoe
The simplest solution would be to swap your content and sidebar div.
最简单的解决方案是交换您的内容和侧边栏 div。
Instead of
代替
<div class='content'>
sdaohdosahdaf
<br />adfafhaskldjs sgdafadkfjas
<br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
daobfhaohfasod agsdjfa
<br />sidjaofhad
<br />sojghfadpfjas
</div>
You do:
你做：
<div class='sidebar'>
daobfhaohfasod agsdjfa
<br />sidjaofhad
<br />sojghfadpfjas
</div>
<div class='content'>
sdaohdosahdaf
<br />adfafhaskldjs sgdafadkfjas
<br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
Your css stays the same. Here's how it looks like, exactly what you're looking for :)
你的 css 保持不变。这就是它的样子，正是您要找的东西:)
