Question

我有一个包含两个其他div的div。第一个div有不同的宽度。第二个div有一个固定的宽度。

a）当屏幕的宽度（将使用媒体查询）小于阈值时，我希望div在两个单独的行中。一行浮动到左边，另一行浮动到右边，但是堆叠在一起，下面是固定的行，并且浮动到不同宽度行的右边。

-------------------------------
| varying width div           |
-------------------------------
            -------------------
            | fixed width div |
            -------------------

b）当屏幕宽度大于或等于阈值（再次是媒体查询）时，我希望这两个div在一行中。随着宽度div的变化，使用宽度的其余部分。

---------------------- -------------------
| varying width div  | | fixed width div |
---------------------- -------------------

This jsfiddle提供了我想要的以及我尝试过的详细示例。

Margin-float方法：适用于中型和大型div的方法，但不适用于小型div。如果我使用媒体查询为小型div使用不同的css，那么右列将出现在左列之上，因为浮点数取决于html顺序：

<div>
    <div class="col2">
        Fixed text
    </div>        
    <div class="col1">
        Varying length text goes here
    </div>
</div>

.approach-group.margin-float .col1 {
    margin-right: 100px;
}

.approach-group.margin-float .col2 {
    width: 100px;
    float: right;
}

Float-only方法：适用于小型和大型div的方法，但不适用于中型div。此方法也有未定义的行为，因为它使用floats without a width。

<div>
    <div class="col1">
        Varying length text goes here
    </div>
    <div class="col2">
        Fixed text
    </div>        
</div>

.approach-group.float-both .col1 {
    float: left;
}

.approach-group.float-both .col2 {
    width: 100px;
    float: right;
}

我想知道是否有任何CSS方法来解决这个问题。

此外，如果您知道如何在没有媒体查询的情况下执行此操作，并且只知道第1列的最小宽度规范（如果宽度低于阈值则强制两行），这将更加惊人。

提前谢谢！

Answer 1

@Evgeniy提供了一个很好的解决方案。我用他的方法更新了my jsfiddle（参见解决方案＃1）。我正在给他一个复选标记，但我认为我对解决方案更加明确：

<div class="container">
    <div class="col1">
        Varying length text goes here
    </div>
    <div class="col2">
        Fixed text
    </div>
</div>

.approach-group.table-cell .container {
    display: table;
    width: 100%;    
}

.approach-group.table-cell .col1 {
    display: table-cell;
}

.approach-group.table-cell .col2 {
    display: table-cell;
    width: 100px;
}

这个解决方案还允许我使用媒体查询来消除上面的样式，而当屏幕大小低于某个阈值（带有margin-float方法的关键缺陷）时，col2会在col1下向右拉。

有关详情，请转至the jsfiddle。

Answer 2

您可以使用bootstrap方式达到目标。例如：

我们有2个具有不同适应性行为的div

<div class="row">
  <div class="col-x-6">1</div>
  <div class="col-x-6">2</div>
</div>

让 .col-x-6 - 为某些屏幕分辨率设置默认宽度或特殊宽度。下一步是添加额外的类以更改其他分辨率的宽度

<div class="row">
  <div class="col-x-6 col-y-12">1</div>
  <div class="col-x-6 col-y-6"">2</div>
</div>

如果屏幕符合某种分辨率，

col-y-12会覆盖col-x-6。

因此，您可以轻松地在不同的@media包装中设置col-y- *和col-x- * width。

@media (min-width: 480px) {
    .col-x-6{
        width: 50%;
    }

    .col-x-12{
        width: 100%;
    }
}

@media (min-width: 768px) {
    .col-y-6{
        width: 100%;
    }

    .col-y-12{
        width: 100%;
    }
}

如果您想在一行上显示块，一行具有固定宽度，第二行使用流体（父容器的其余部分），您可以在 .row上使用 display：table .colx

上的strong>和显示：table-cell

更多信息结帐bootstrap page

响应式CSS：两个div。一个固定尺寸右浮动。一个不同的大小。如果尺寸<1，则堆叠阈值，如果尺寸> =阈值，则为一行

2 个答案: