两个DIV 1有静态宽度，其他fliud，但是如何获得右div以堆栈UNDER @断点？ [英] Two DIVs 1 with static width, other fliud, but how to get right div to stack UNDER @ breakpoint?

问题描述

我有两个div在每个/旁边。

LEFT div有一个FLUID宽度。
RIGHT div有一个静态wdth。

当我调整屏幕/浏览器的大小...它工作伟大！ （和预期的）。
但是因为它的设置方式：

（小提示示例： http://jsfiddle.net/VHcPT/384/ ）

RIGHT div在物理上首先在标记

然而在说768px断点..我需要这个RIGHT（静态）DIV堆栈下LEFT div ..如何实现这个？

如果我在标记中物理上有LEFT div之后的RIGHT div。它会按预期堆叠。但我需要它的第一，所以流体/静态

因此，为了重新覆盖，它不是让两个div彼此相邻一个流体，一个静态它的如何在响应/断点处理，并获得静态（RIGHT）div堆栈下UNDER流体（LEFT）div

使用小提示示例... RED DIV会在某个断点处进入UNDER（堆叠）GREEN行/ div ..（绿色将是全宽度）..

：

HTML：

 < div id =contentcontainer > 
< div class =rightcontainer> mm< / div> 
< div class =leftcontainer> 
< div class =item_1> 
一些文本
< / div> 
< div class =item_2> 
一些文本
< / div> 
< / div> 
< / div> 
  

CSS：

 code> #directorycontainer {
 padding：10px 10px; 
 display：table; 
 box-sizing：border-box; 
 width：100％; $ b $ d font-size：0.8em; 
 font-weight：normal; 
} 
 
 
 .directory {
 background：green; 
 margin-right：10px; 
 overflow：hidden; 
 padding-right：10px; 
 position：relative; 
} 
 
 .mapcontainer {
 background：red; 
 display：table; 
 width：240px; 
 height：480px; 
 float：right; 
 position：relative; 
 overflow：hidden; 
} 
 
 .providercontainer {
 background-color：＃f7f9fb; 
 border：1px solid＃e1dacd; 
 display：table; 
 margin-bottom：0.625em; 
 padding：0; 
 width：100％; 
} 
  

解决方案

您可能喜欢我的FLEXBOX替代给你的问题。这可能需要一些练习，但它最终会给你更多的控制。

FIDDLE

在基本CSS结构下面，不需要其他的显示，位置使用此结构，您可以混合匹配任何数量的固定和/或流动列。

  .flex  - 柔性; flex-flow：row wrap} 
 .flex  -  fluid {flex：1 1 auto} 
 .flex  -  fixed {flex：0 0 auto; min-width：240px} 
 
 / * MOBILE MQ * / 
 @media all和（max-width：360px）{
 .flex  -  fluid，.flex-固定{
 flex：1 1 auto; 
} 
} 
  

让我知道如果你有问题。 / p>

当然，如果你认为它值得的话，那就给予信用。
（BTW：我把颜色改成少了视网膜密集型& D）

I have two divs next to each/side by side..

The LEFT div has a FLUID width. The RIGHT div has a static wdth.

When I resize the screen/browser... it work great! (and as intended). However because of the way it was set up:

(Fiddle example: http://jsfiddle.net/VHcPT/384/)

The RIGHT div in physically first in the mark-up..(and floated RIGHT).

However at say 768px breakpoint.. I need this RIGHT (static) DIV to stack UNDER the LEFT div.. how can I achieve this?

If I physically have the RIGHT div AFTER the LEFT div in the markup.. it would stack as expected.. but I need to have it FIRST so the fluid/static behavior in place works as it should.

So to re-cap, its NOT about getting the two divs next to each other one fluid, one static.. its how to handle that at a responsive/breakpoint.. and get the static (RIGHT) div to stack UNDER the fluid (LEFT) div

Using the fiddle example.. the RED DIV would go UNDER (stack) the GREEN lines/div.. (the green would then be full width).. at a certain breakpoint.

and because code is required now:

HTML:

<div id="contentcontainer">
    <div class="rightcontainer">mm</div>
    <div class="leftcontainer">
        <div class="item_1">
            some text
        </div>
        <div class="item_2">
            some text
        </div>        
    </div>        
</div>

CSS:

#directorycontainer {
    padding:10px 10px;
    display:table;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.8em;
    font-weight: normal;
}


.directory {
    background: green;
    margin-right: 10px;
    overflow: hidden;
    padding-right: 10px;
    position: relative;
}

.mapcontainer {
    background: red;   
    display:table; 
    width:240px;
    height:480px;
    float:right;
    position:relative;
    overflow: hidden;
}

.providercontainer{
    background-color: #f7f9fb;
    border: 1px solid #e1dacd;
    display: table;
    margin-bottom: 0.625em;
    padding: 0;
    width: 100%;
}

解决方案

you may like my FLEXBOX alternative to you problem. It may take a bit of practice, but it will eventually give you much more control.

The FIDDLE

Below the basic CSS structure, no other 'display', 'position' or 'overflow' needed. With this structure you can mix-match any number of fixed and/or fluid columns.

.flex--box   { display: flex; flex-flow: row wrap }
.flex--fluid { flex: 1 1 auto }
.flex--fixed { flex: 0 0 auto; min-width: 240px }

/* MOBILE MQ */
@media all and (max-width: 360px) {
    .flex--fluid, .flex--fixed {
        flex: 1 1 auto;
    }
}

Let me know if you have problem with it.

And of course, do give credit if you think it is worth it. ( BTW: I changed the colors to something less retina intensive &D )

这篇关于两个DIV 1有静态宽度，其他fliud，但是如何获得右div以堆栈UNDER @断点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！