社区首页 >问答首页 >Div占用剩余的水平空间，并在小屏幕上垂直堆叠

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

Stack Overflow用户

提问于 2013-07-01 15:32:30

回答 3查看 3.4K关注 0票数 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垂直堆叠在一起。如下所示：

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

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

唯一的问题是需要在标记中创建右边的div (根据其内容调整大小)，然后再创建左边的work，这样浮动的东西才能工作。因此，它在“小”布局中出现在左侧布局的上方：

下面是一个有效的示例(只需使用中间的调整大小在“小”和“大”布局之间切换)：Example on JSFiddle

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

css-float

html

css

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-07-01 15:50:53

正如in this stackoverflow post所说，如果你不想求助于jQuery，Flexbox可以帮助你，因为你只需要一个现代浏览器: 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不支持它)！

票数 6

Stack Overflow用户

发布于 2013-07-01 16:23:45

一种基于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元素的宽度，或者使用最大宽度和最小宽度的组合，这取决于您希望如何处理单行文本的结尾大小写。

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

对于较小的屏幕，将display属性重置为block；对于.right，将display属性设置为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();