调整浏览器大小时，使列和主要内容保持在左侧或右侧 [英] Make column and main content stay on left or right, as browser is resized

问题描述

我有一个浮动的右列，当浏览器宽度减小时，该列成功地将主要内容区域向右推. CSS:

I have a floating right column, that successfully pushes the main content area right when the browser width is reduced. CSS:

div.bigSquare 
{
    min-width: 200px; 
    max-width: 400px;
    background-color:silver;
}

div.floatRight
{
    float:right;
    width:100px;
    height:200px;
    background-color: pink;
}   

HTML:

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right square</div>

<div class="bigSquare">The main content area has very very very very very 
very very very very very very very very very very very very very very 
very very very very very very very very very very very very very very very         
very very very very 
very very very many words in it.
</div>

( JSFiddle )

问题是，当我充分缩小浏览器宽度时，主要内容区域的文本会溢出到右列下方:

The problem is that when I shrink the browser width sufficiently, the text of the main content area spills over underneath the right column:

我希望主要内容始终保持在右列的左侧.最好的方法是什么?

I would like to keep the main content always left of the right column. What's the best way to do this?

推荐答案

每当您float一个元素时，请不要忘记必须对其进行clear设置，否则您会发现其后的元素的行为无法预测

Whenever you float an element, do not forget that it has to be cleared, or you would see unpredictable behaviour for the elements that follow it.

您必须指定overflow属性或clear float，并在此过程中创建一个新的block formatting context，以使浏览器知道它可以停止随后浮动元素.

You have to specify overflow property, or clear the floats and in doing so create a new block formatting context to let the browser know that it can stop floating the elements then.

当我在bigSquare上指定overflow: auto时，请参见下面的示例-请注意，在较小的屏幕上，bigSquare会降到floatRight以下:

See example below when I specify overflow: auto on bigSquare- note that on smaller screen bigSquare will fall below floatRight:

div.bigSquare {
  min-width: 200px;
  max-width: 400px;
  background-color: silver;
  overflow: auto;
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
</div>

解决方案:

因此，在您的情况下，这是解决方案-使用以下方法也可以浮动bigSquare和clear在floatRight之后的浮动:

So in your case, here is the solution- float your bigSquare too and clear the float after floatRight using this:

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

请注意，您还必须为浮动容器指定width-否则它将包裹(一个在另一个下方)-因此为bigSquare指定宽度以调整floatRight的100px:

Note you have to specify widths for the floated containers too- otherwise it will wrap (come one below the other)- so specifying a width for bigSquare to adjust for the 100px of floatRight:

  width: calc(100% - 100px);

以下代码段:

div.bigSquare {
  max-width: 400px;
  background-color: silver;
  float: left;
  width: calc(100% - 100px);
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
</div>
<div style="clear: both"></div>

最简单的解决方案:

不要使用浮点数-请使用flexbox:

Don't use floats- use a flexbox:

.flexbox {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse; /*wrap if window width less than combined min-widths*/
}
div.bigSquare {
  background-color: silver;
  flex: 1 0 200px;/*set min-width*/
}
div.floatRight {
  width: 100px;
  height: 200px;
  background-color: pink;
  flex: 1 0 100px;/*set min-width*/
}

<h2>Fun with positions, widths, and heights</h2>

<div class="flexbox">
  <div class="floatRight">Right column</div>

  <div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
  </div>
</div>

这篇关于调整浏览器大小时，使列和主要内容保持在左侧或右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！