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

我需要将两个

div

元素水平并排堆叠，其中右边的元素应始终自动调整其大小以适应其内容（最大给定宽度），左边的元素应仅使用左边的空间

大概是这样的：

到目前为止没有问题。我通过将右侧的

div

浮动到右侧并将左侧的溢出设置为隐藏来实现这一点：

HTML:

挑战在于，当页面显示在小屏幕（或小浏览器窗口，…）上时，我希望两个

div

s垂直堆叠，如下所示：

基本上，我认为这可以通过一个简单的媒体查询来实现：

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

唯一的问题是，右

div

（根据其内容调整大小的div）需要在标记中的左div之前创建，以使浮动对象工作。因此，它出现在“小”布局中左侧的上方：

下面是一个工作示例（只需使用中间大小调整器在“小”和“大”布局之间切换）：

---

我已经尝试使用

display:table

和

table cell

来完成布局，而不是浮动，但是这样我无法使正确的列与其内容一样大，并且仍然有一个工作的最大宽度集。

我想不出任何纯CSS解决方案，但是如果您倾向于使用jquery，您可以像这样使用append方法：

$('.frame').append($('.right'));

这只会移动“帧”子对象末尾的“右”块

根据您的浏览器，有许多解决方案可以获得屏幕/窗口/帧宽度。

如前所述，如果您不想求助于jQuery，可以帮助您，因为您只需要一个现代浏览器：Mobile Safari（编辑我还发现IE中的

左

框的高度在我的小提琴中不起作用，我不知道为什么；应该如此）

对您来说，这将是：

编辑因为您希望右侧的

div

调整到其内容，所以您希望

CSS:

我对我的结果非常满意，我觉得你会的！我相信它几乎有完整的（Mobile Safari不支持它）支持！

基于CSS/jQuery的方法 假设HTML和内容可以按如下方式调整，

.left

元素出现在

.right

元素之前：

<div class="frame">
    <div class="left">Lorem ipsum dolor sit amet, c...</div>
    <div class="right">
        <div class="color-wrap">I adjust my width ...</div>
    </div>
</div>

对于较小的屏幕：

@媒体屏幕和（最大宽度：700px）{
.左{
显示：块；
}
.对{
显示：块；
宽度：自动；
}
.对，彩色包装{
显示：块；
宽度：自动；
颜色：黄色；
}
}

对于大屏幕，您可以使用

display:table cell

，或者为

.right

元素设置宽度，或者根据您希望如何处理单行文本的大小写，使用最大宽度和最小宽度的组合

如果需要使用背景色来仅绘制文本区域，则使用包装器元素，如

.color wrap

，并将背景色应用于该区域，而不是应用于表格单元格父元素

对于较小的屏幕，将显示属性重置为block和For

。right

设置

宽度：auto

这是一种相对简单的方法，只有一个与处理

.right

有一行文本的情况相关的约束

处理右侧的短线-调整宽度

要允许

.right

块收缩以适合单行内容，需要调整

.right

表格单元格的宽度

这可以使用以下jQuery完成：

var rightCellMaxWidth=parseInt（$（“.right”）.css（“width”）；
函数fixRightCellWidth（）{
$（“.right.color wrap”）。每个（函数（）{
var rightCellWidth=$（this）.outerWidth（）；
var rightCellType=$（this.css（“display”）；
如果（rightCellWidth

诀窍是获得元素的宽度

。正确。彩色包裹
。您还需要检查显示类型以查看您处于何种媒体模式，
内联块
用于大屏幕，
块
用于小屏幕

对于较大屏幕，将右侧表格单元格元素宽度设置为
.color wrap
子元素的宽度。对于单行文本，该宽度将小于200px，对于多行文本，该宽度将为最大宽度值200px

您还需要删除内联样式以清除多行框或小屏幕框的宽度设置

演示小提琴：

设计评论

如果没有JavaScript/jQuery，页面将优雅地降级为固定宽度的右元素，页面仍然可用。
OP希望
右
div在左前声明，但在小屏幕上出现，您的解决方案根本无法解决这一问题all@Zeaklous谢谢你提出了一个相关的观点。这不是清晰的如果内容必须以这种方式组织，请从OP中向我发送r。然而，我决定将答案放在那里以获得一些反馈。其他人可能会发现它很有用。@Zeaklous这是一个误解：我不想在左div之前声明右div。这只是使我的布局工作正常所必需的。实际上，我更喜欢使用l以“正确”顺序声明元素的布局，并且work@MarcAudet不幸的是，在您的示例中，右边的div并没有真正调整其宽度以适应其内容，而是有一个固定的宽度200px
$('.frame').append($('.right'));

.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;
    }
}

<div class="frame">
    <div class="left">Lorem ipsum dolor sit amet, c...</div>
    <div class="right">
        <div class="color-wrap">I adjust my width ...</div>
    </div>
</div>