Question

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

这样的事情： enter image description here

到目前为止没问题。我设法通过向右浮动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垂直堆叠：

enter image description here

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

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

唯一的问题是需要在标记中的左边一个之前创建右div（根据其内容调整大小的那个）以使浮动内容起作用。结果，它出现在“小”布局中的左侧上方：

enter image description here

这是一个工作示例（只需使用中间缩放器在“小”和“大”布局之间切换）：Example on JSFiddle

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

Answer 1

如上所述in this stackoverflow post，Flexbox可以帮助您，如果您不想诉诸jQuery，因为您只需要to support一个现代浏览器：Mobile Safari（编辑我还发现IE中left框的高度在我的小提琴中不起作用，我不知道为什么;它应该）。

对您而言： This awesome fiddle!

修改由于您希望权限div适应其内容，因此您需要this example

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不支持它）支持！

Answer 2

基于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>

您可以将以下CSS用于宽屏幕：

.frame {
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow: auto;
}
.left {
    background-color: #709670;
    border: 1px solid black;
    display: table-cell;
}
.left .color-wrap {
}
.right {
    display: table-cell;
    width: 200px;
    vertical-align: top;
}
.right .color-wrap {
    background-color: #127212;
    color: white;
    border: 1px solid black;
    display: inline-block;
}

和较小的屏幕：

@media screen and (max-width: 700px) {
    .left {
        display: block;
    }
    .right {
        display: block;
        width: auto;
    }
    .right .color-wrap {
        display: block;
        width: auto;
        color: yellow;
    }
}

对于大屏幕，您可以使用display: table-cell并为.right元素设置宽度，或者使用max-width和min-width的组合，具体取决于您希望如何处理单行文本的结尾。

如果您需要背景颜色仅绘制文本区域，请使用包装元素（如.color-wrap）并将背景颜色应用于它而不是表格单元格父元素。

对于较小的屏幕，请将显示属性重置为阻止，并将.right设置为width: auto。

这是一种相对简单的方法，只有一个约束与处理.right具有单行文本的情况有关。

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

要允许.right块缩小到适合单行内容，您需要调整.right表格单元格的宽度。

这可以使用以下jQuery来完成：

var rightCellMaxWidth = parseInt($(".right").css("width"));

function fixRightCellWidth() {
    $(".right .color-wrap").each(function () {
        var rightCellWidth = $(this).outerWidth();
        var rightCellType = $(this).css("display");
        if (rightCellWidth < rightCellMaxWidth 
            && rightCellType == "inline-block") {
            $(this).parent().width(rightCellWidth);
        } else {
            $(this).parent().removeAttr("style");
        }
    });
}

$(window).resize(function () {
    fixRightCellWidth();
});

fixRightCellWidth();

诀窍是获得元素.right .color-wrap的宽度。您还需要检查显示类型以查看您所处的媒体模式，inline-block表示大屏幕，block表示较小屏幕。

对于较大的屏幕，请将正确的table-cell元素宽度设置为.color-wrap子元素的宽度。对于单行文本，这将小于200px，对于多行，宽度将是200px的最大宽度值。

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

演示小提琴：http://jsfiddle.net/audetwebdesign/N4KE2/

设计评论

如果没有JavaScript / jQuery，页面将优雅地降级为固定宽度的右元素，页面仍然可用。

Answer 3

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

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

这只会在“框架”孩子的末尾移动你的“正确”区块。

有很多解决方案可以获取屏幕/窗口/框架宽度，具体取决于您的浏览器。

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

3 个答案:

基于CSS / jQuery的方法