Html 3列布局-1个可变，1个固定，所有高度相等-此代码是否有问题？

长话短说，我的代码有问题吗？有时候我写的东西是新的“技术上可行”，但后来我知道我使用了黑客或者有更好、更合适的方法来构建一些东西。我从网上找到的不同想法拼凑而成

3列布局

• 左栏为25%

• 右列为150px

• 中柱使用所有剩余空间

• 所有立柱的高度应相等

这样我就不会浪费任何人的时间来验证CSS了。在Windows10下，它在Chrome、Firefox、Edge、IE8-11和Opera上运行良好

HTML

是的，很黑

• overflow:hidden

  作为一种建立块格式上下文的方法是一种攻击。正确的方法是

  display:flow root

  ，但这是一个最近提出的方案，在任何地方都不受支持
• 在布局中使用浮点数可能被认为是一种技巧

• 填充底部：1000px；边距底部：-1000px

  绝对是一个黑客，你需要它，因为你使用了黑客浮动

现代的方式是flexbox：

.wrapper{
显示器：flex；
}
科卢先生离开了{
宽度：25%；
顺序：1；
}
中校{
弹性：1；
顺序：2；
}
上校：对{
宽度：150px；
顺序：3；
}

是的，它很黑

• overflow:hidden

  作为一种建立块格式上下文的方法是一种攻击。正确的方法是

  display:flow root

  ，但这是一个最近提出的方案，在任何地方都不受支持
• 在布局中使用浮点数可能被认为是一种技巧

• 填充底部：1000px；边距底部：-1000px

  绝对是一个黑客，你需要它，因为你使用了黑客浮动

现代的方式是flexbox：

.wrapper{
显示器：flex；
}
科卢先生离开了{
宽度：25%；
顺序：1；
}
中校{
弹性：1；
顺序：2；
}
上校：对{
宽度：150px；
顺序：3；
}

是的，我觉得很不舒服。 从反应灵敏的设计角度来看，它看起来不太好。 在1000 px上填充可能在一个屏幕分辨率上工作，但是我们有很多屏幕尺寸需要考虑。更好的方法如下所示

.wrapper {
        margin: 20px auto;  
        width: 90%;
        position:relative;
        left: 0;
        top: 0;
    }

    .col_left,
    .col_middle,
    .col_right {
        box-sizing: border-box;
        padding: 10px;
    }

    .col_left {
        width: 25%;
        background-color: rgb(220,220,220);
        position:absolute;
        top:0;
        bottom:0;
    }

    .col_middle {
        width: auto;
        background-color: rgb(210,210,210);
        position:absolute;
        top:0;
        left: 25%;
        bottom:0;
        right: 150px;
    }

    .col_right {
        width: 150px;
        background-color: rgb(200,200,200);
        position:absolute;
        top:0;
        bottom:0;
        right:0;
    }

如果调整浏览器的大小，您会注意到它会适应屏幕大小

然后，您可以使用媒体查询，使其适合手机和平板电脑。i、 e

@media screen and (max-width: 768px) {
        .col_left {
            width: 100%;
            height:auto;
            left:0;
            right:0;
            bottom: auto;
            top:0;
            position:relative;
        }
        .col_middle {
            width: 100%;
            height:auto;
            left:0;
            right:0;
            bottom: auto;
            top:0;
            position:relative;
        }
        .col_right {
            width: 100%;
            height:auto;
            left:0;
            right:0;
            bottom: auto;
            top:0;
            position:relative;
        }
    }

我建议查看引导的网格布局

如果您只需要bootstrap中的网格布局，而没有其他功能特性，那么可以使用bootstrap定制程序来减少文件大小

只需取消选中所有复选框，并在CommonCSS和download下保持网格系统处于选中状态。 使生活比想出黑客更容易。

是的，在我看来是黑客。 从反应灵敏的设计角度来看，它看起来不太好。 在1000 px上填充可能在一个屏幕分辨率上工作，但是我们有很多屏幕尺寸需要考虑。更好的方法如下所示

.wrapper {
        margin: 20px auto;  
        width: 90%;
        position:relative;
        left: 0;
        top: 0;
    }

    .col_left,
    .col_middle,
    .col_right {
        box-sizing: border-box;
        padding: 10px;
    }

    .col_left {
        width: 25%;
        background-color: rgb(220,220,220);
        position:absolute;
        top:0;
        bottom:0;
    }

    .col_middle {
        width: auto;
        background-color: rgb(210,210,210);
        position:absolute;
        top:0;
        left: 25%;
        bottom:0;
        right: 150px;
    }

    .col_right {
        width: 150px;
        background-color: rgb(200,200,200);
        position:absolute;
        top:0;
        bottom:0;
        right:0;
    }

如果调整浏览器的大小，您会注意到它会适应屏幕大小

然后，您可以使用媒体查询，使其适合手机和平板电脑。i、 e

@media screen and (max-width: 768px) {
        .col_left {
            width: 100%;
            height:auto;
            left:0;
            right:0;
            bottom: auto;
            top:0;
            position:relative;
        }
        .col_middle {
            width: 100%;
            height:auto;
            left:0;
            right:0;
            bottom: auto;
            top:0;
            position:relative;
        }
        .col_right {
            width: 100%;
            height:auto;
            left:0;
            right:0;
            bottom: auto;
            top:0;
            position:relative;
        }
    }

我建议查看引导的网格布局

如果您只需要bootstrap中的网格布局，而没有其他功能特性，那么可以使用bootstrap定制程序来减少文件大小

只需取消选中所有复选框，并在CommonCSS和download下保持网格系统处于选中状态。

---

使生活比使用hack更容易。

Flex看起来比float更明智100倍。但是关于IE11和Flex，它说，“部分支持是由于存在大量的bug（参见已知问题）”。我去了美国，IE11下降很快，但仍在7.47%。当那块垃圾下降到1%以下时，我想我和其他人都会屈服。它看起来和理解起来容易多了。@DR01D在IE11中有没有任何pollyfills可以让它在不破坏任何东西的情况下工作？@Oriol我刚刚在IE11和IE10中尝试了它，它成功了！这是我的名片。我也在Opera迷你模拟器上试用过，效果不错。所以基本的Flex标签可能会起作用。只要我用它来做基本布局就可以了。。。我想。仅供参考，我在IE9中尝试过，Flex完全崩溃了。从版本10开始，DR01D IE就支持flexbox。有一些问题的错误，但像这样的基本布局应该确实有效。请参阅@Oriol是否有您尊重的Flex“基础/操作”页面？如果我使用Flex，我就不必刷新我学到的其他HTML标记了？Flex看起来比float更合理100倍。但是关于IE11和Flex，它说，“部分支持是由于存在大量的bug（参见已知问题）”。我去了美国，IE11下降很快，但仍在7.47%。当那块垃圾下降到1%以下时，我想我和其他人都会屈服。它看起来和理解起来容易多了。@DR01D在IE11中有没有任何pollyfills可以让它在不破坏任何东西的情况下工作？@Oriol我刚刚在IE11和IE10中尝试了它，它成功了！这是我的名片。我也在Opera迷你模拟器上试用过，效果不错。所以基本的Flex标签可能会起作用。只要我用它来做基本布局就可以了。。。我想。仅供参考，我在IE9中尝试过，Flex完全崩溃了。从版本10开始，DR01D IE就支持flexbox。有一些问题的错误，但像这样的基本布局应该确实有效。请参阅@Oriol是否有您尊重的Flex“基础/操作”页面？如果我使用Flex，我就不必刷新我学到的其他HTML标记了？

padding:10px 10px 1000px 10px和
页边距底部：-1000px是根据Oriol（我相信他）的黑客。但它们不会影响屏幕高度。如果您选中下面的所有内容，文本将消失。我现在要试试你上传的代码。同样不幸的是，我不能使用引导。谷歌的新版本不允许用户编写Javascr