Question

我有两个DIV，第一个是自动宽度（内容），第二个是固定宽度。

当屏幕变得太窄/窗口缩放时，固定宽度DIV会在顶部变为100％宽度。我想复制一下，但我希望固定的DIV在浏览器变得太窄时不在底部而不是顶部。我怎么能做到这一点？感谢。

（请检入＆＃39;全页＆＃39;模式）

＆＃13;

.container-wrapper
{
    overflow:   hidden;    
}

.fixed-right
{
   overflow:     hidden;
   min-height:   100px;
   min-width:    400px;
   float:        right;
}

.auto-left
{
   overflow:     hidden;
   min-height:   100px;
}

.fancy
{
   border-radius: 2px;
   background-color:lightgray;
   margin-left: 5px;
   padding: 5px;
}

  @media 
  only screen and (max-width: 764px), (min-device-width: 764px) and (max-device-width: 1024px)  
  {
       .fixed-right
       {
          float:          none;
          width:          auto;
          margin-left:    0px;
          margin-bottom:  5px;
        }
  }

＆＃13;

<div class="container-wrapper">
		<div class='fixed-right fancy'>
			Fixed&nbsp;
		</div>

		<div class="auto-left fancy">
			Auto&nbsp;
		</div>
	</div>

＆＃13;

Answer 1

您可以在包装器上使用display: flex;。在两个不同的视口中切换flex-direction。请注意，如果您向包装器添加更多元素，并且能够设置顺序，则此解决方案会变得更加灵活。

然后定义div的顺序。

在大视图中，您将正确的div设置为订单1
在较小的位置将其设置为0，这意味着它将是第一个（在顶部）

.container-wrapper {
  display: flex;
  flex-direction: row;
}

.fixed-right {
  overflow: hidden;
  min-height: 100px;
  min-width: 400px;
  order: 1;
}

.auto-left {
  overflow: hidden;
  min-height: 100px;
}

.fancy {
  border-radius: 2px;
  background-color: lightgray;
  margin-left: 5px;
  padding: 5px;
}

@media only screen and (max-width: 764px),
(min-device-width: 764px) and (max-device-width: 1024px) {
  .container-wrapper {
    flex-direction: column;
  }
  
  .fixed-right {
    width: auto;
    margin-left: 0px;
    margin-bottom: 5px;
    order: 0;
  }
  
  .fancy {
    margin-left: 0;
  }
}

<div class="container-wrapper">
  <div class='fixed-right fancy'>
    Fixed&nbsp;
  </div>

  <div class="auto-left fancy">
    Auto&nbsp;
  </div>
</div>

Answer 2

非常简单，更改HTML DOM中Div的顺序：

    <div class="container-wrapper">
        <div class="auto-left fancy">
            Auto&nbsp;
        </div>
    <div class='fixed-right fancy'>
            Fixed&nbsp;
    </div>  
    </div>

向右浮动，将在桌面上按照您的需要进行操作

Answer 3

尝试将此添加到@ media-query;

.container-wrapper {
  display: flex; 
  flex-direction: column-reverse;
}

让DIV浮动到底部而不是顶部

3 个答案: