Question

我需要一个固定的右列，左列需要占用剩余的空间。然后在移动设备上，两列都是全宽，右列应该在左侧浮动 UNDER 。

我按照这个Stack问题来解决如何修复正确的列，以及左列的可变宽度：make a div fill up the remaining width

这涉及到我在HTML中的左列div上方移动右列div。所以现在在较小的浏览器中，当我将两列都设置为100％宽度时，右侧浮动高于左侧，但我希望右列浮动 < / strong>左边。

关于改变什么的任何想法？

<div id="main"> <div id="primary"> left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> </div> <div id="container"> middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller </div> </div> #main { width: 100%; } #primary { width: 100px; float: right; background-color: #fcc; } #container { background-color: #cfc; overflow: auto; } @media screen and (max-width: 500px) { #primary, #container{ width: 100%; } #primary{ float:none; } } }

https://jsfiddle.net/8pk4K/2157/

Answer 1

也许试试这个：

<强> HTML

<div id="main">
  <div id="container">
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
  </div
  ><div id="primary">
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
  </div>
</div>

请注意＆＃34;容器＆＃34; div close标记被扩展是因为容器和主div之间不能有任何空格，否则会在它们之间放置额外的空格。

<强> CSS

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  right: 0px;
  background-color: #fcc;
  display: inline-block;
}
#container {
  vertical-align: top;
  display: inline-block;
  background-color: #cfc; 
  overflow: auto;
  top: 0px;
  left: 0px;
  width: calc(100% - 100px);
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
}
}

Answer 2

1;首先将容器放在HTML标记中，然后是固定宽度div。

2;设置要显示的元素：table-cell;在宽屏幕和显示器上：块;在狭窄的屏幕上

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  display:table-cell;
  background-color: #fcc;
}
#container { 
    display:table-cell;
    background-color: #cfc; 
    overflow: auto;
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #container{
        display:block;
    }
    #primary{
        display:block;
        width:100%;
    }
}

https://jsfiddle.net/Nillervision/hpsnqs60/

Answer 3

你发布了什么花车＆＃34;主要＆＃34;向右和向右给它一个固定的宽度，即使你正在调用它＆＃34;左div离开div div。＆＃34;这与你上面解释的相反。在小屏幕上它应该放置＆＃34; primary＆＃34;首先然后＆＃34;容器＆＃34;按照它们出现在HTML中的顺序，这正是发生的事情。

同时给出宽度（百分比有效）和浮动。最简单的解决方法是交换HTML订单...

https://jsfiddle.net/8pk4K/2159/

#main { 
  width: 100%; 
}
#primary { 
  width: 10%;
  float: right;
  background-color: #fcc;
}
#container { 
  background-color: #cfc;
    width: 90%;
  overflow: auto;
  float:left;
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #primary{
        float:none;
    }
}
}

<div id="main">

      <div id="container">
        middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
      </div>
      <div id="primary">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
      </div>
    </div>

Answer 4

您肯定希望在HTML中将右列放在第二位。在那之后，有很多方法可以用CSS完成你想要的东西。

一种方法是在右栏上使用绝对定位，在父元素上添加padding-right：

＆＃13;

#main {
  position: relative;
  padding-right: 100px;
}
#primary { 
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fcc;
}
#container { 
  background-color: #cfc; 
}

@media screen and (max-width: 500px) {
  #main {
    padding-right: 0;
  }
  #primary, #container{
    width: auto;   
  }
  #primary{
    position: static;
  }
}

＆＃13;

<div id="main">
  <div id="container">
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
  </div>
  <div id="primary">
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
  </div>
</div>

＆＃13;

jsfiddle.net/8pk4K/2160

Answer 5

我已经用几行javascript更新了小提琴。

将promary div设为absolute。

这是小提琴 - https://jsfiddle.net/8pk4K/2162/

需要在小屏幕上向左下方流动（右侧固定宽度，左侧可变宽度）

5 个答案: