占用剩余水平空间并在小屏幕上垂直堆叠的Div

Question

我需要div水平并排堆叠两个元素,其中右边的元素应该自动调整其大小到其内容(最大给定宽度),左边的元素应该只使用左边的空间.

像这样的东西:

到目前为止没问题.我设法通过向右浮动div并将左边的溢出设置为隐藏来实现此目的:

HTML:

<div class="frame">
    <div class="right">
        I adjust my with to my content but still need to know my boundaries if I'm floated right (max-width)
    </div>

    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

CSS:

.frame {
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow: hidden;
}

.left {
    overflow: hidden;

    background-color: #709670;
    border: 1px solid black;
}

.right {
    float: right;
    max-width: 200px;

    background-color: #127212;
    color: white;
    border: 1px solid black;
}

挑战在于,div当页面显示在小屏幕(或小浏览器窗口......)上时,我希望将两个s垂直堆叠,如下所示:

基本上我认为这可以通过简单的媒体查询来完成:

@media screen and (max-width: 700px) {
    .right {
        float: none;
        max-width: none;
    }
}

唯一的问题是div需要在标记中的左边一个之前创建权限(根据其内容调整大小的权限)以使浮动内容起作用.结果,它出现在"小"布局中的左侧上方:

这是一个工作示例(只需使用中间调整器在"小"和"大"布局之间切换):JSFiddle上的示例

我已经尝试使用display: table而table-cell不是浮动来完成布局,但是这样我无法使正确的列与其内容一样大并且仍然具有可用的最大宽度设置.

Answer 1

正如在这个stackoverflow帖子中所说,如果你不想使用jQuery ,Flexbox可以帮助你因为你只需要支持一个现代浏览器:Mobile Safari(编辑我也发现leftIE中盒子的高度不起作用在我的小提琴中,我不知道为什么;它应该).

对你来说,这将是: 这个令人敬畏的小提琴!

编辑既然你要正确div调整到它的内容,你想这个例子,而不是

CSS:

.frame {
    position:relative;
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow:hidden;
    flex-flow:row wrap;

    -webkit-justify-content: flex;
    -moz-justify-content: -moz-flex;
    justify-content: flex;

    display: -webkit-box; /* Safari */ 
    display: -moz-box; /* Firefox 21- */
    display: -ms-flexbox; /* IE 10+ */
    display: -webkit-flex; /* Chrome */
    display: flex; /* Standard (Firefox 22+) */

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.left {    
    -ms-flex-order: 1;     
    -webkit-order: 1;
    order:1;

    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #709670;
    border: 1px solid black;
    width: auto;
}

.right {    
    -ms-flex-order: 2;
    -webkit-order: 2;
    order:2;

    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #127212;
    color: white;
    border: 1px solid black;
    width: auto;

    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@media screen and (max-width: 700px) {
    .frame {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

我对结果非常满意,我觉得你会这样!我相信它几乎已满(Mobile Safari不支持它)支持!