5

我需要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: tableandtable-cell而不是浮动来完成布局，但是这样我无法使右列与其内容一样大，并且仍然设置了有效的最大宽度。

4

3 回答 3

6

正如在这篇 stackoverflow 帖子中所说，如果您不想求助于 jQuery ，Flexbox可以为您提供帮助，因为您只需要支持一个现代浏览器：Mobile Safari（编辑我还发现 IE 中框的高度left不起作用就在我的小提琴中，我不知道为什么；它应该）。

对你来说，这将是： 这个很棒的小提琴！

编辑由于您希望有权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 不支持它）！

于 2013-07-01T15:50:52.897 回答
3

基于 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并将背景颜色应用到它而不是 table-cell 父元素。

对于较小的屏幕，将 display 属性重置为 block 和.rightset 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小屏幕。

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

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

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

设计评论

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

于 2013-07-01T16:23:44.813 回答
0

我想不出任何纯 CSS 解决方案，但如果您倾向于使用 jquery，则可以使用 append 方法，如下所示：

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

这只会将您的“右”块移动到“框架”子项的末尾。

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

于 2013-07-01T15:44:11.060 回答