3 列布局 - 1 个变量，1 个固定且高度相等 - 这段代码是黑客吗?

Question

长话短说，我的代码是黑客吗？ 作为新人，有时我写的东西"技术上有效"，但后来我才知道我使用了黑客，或者有更好、更合适的方法来构建一些东西。 我从网上找到的不同想法中拼凑出来。

3 列布局。

• 左列为 25%

• 右列为 150px

• 中间列使用所有剩余空间

• 所有列的高度应相等

为了不浪费任何人的时间，我在CSS Lint上验证了CSS。在Windows 10下，它在Chrome，Firefox，Edge，IE 8 - 11和Opera上运行良好。

这段代码的小提琴

.HTML

<div class="wrapper">
        <div class="col_left"><p><strong>Left Column Text</strong> Drawings me opinions returned absolute in. Otherwise therefore universal did are unfeeling something. Connection too unaffected expression led son possession. New smiling friends and her another.</p></div>
        <div class="col_right"><p><strong>Right Column Text</strong> Certain be ye amiable by exposed so.</p></div>         
        <div class="col_middle"><p><strong>Middle Column Text</strong> Picture removal detract earnest is by. Esteems met joy attempt way clothes yet demesne tedious. Furnished do otherwise daughters contented conveying attempted no. To sorry world an at do spoil along. Incommode he depending do frankness remainder to. Edward day almost active him friend thirty piqued. People as period twenty my extent as. Set was better abroad ham plenty secure had horses. Admiration has sir decisively excellence say everything inhabiting acceptance. Sooner settle add put you sudden him. Ask especially collecting terminated may son expression. Extremely eagerness principle estimable own was man. Men received far his dashwood subjects new. My sufficient surrounded an companions dispatched in on.</p></div>                     
</div>

.CSS

.wrapper {
    margin: 20px auto;  
    width: 90%;
    overflow: hidden; /* This line is necessary. */
}
.col_left,
.col_middle,
.col_right {
    box-sizing: border-box;
    padding: 10px 10px 1000px 10px;
    margin-bottom: -1000px; /* padding 1000 and margin -1000 is the trick to make this work. */
}
.col_left {
    width: 25%;
    float: left;
    background-color: rgb(220,220,220);
}
.col_middle {
    background-color: rgb(210,210,210);
    overflow: hidden;   /* Not floated left or right so it needs this line to form its own Box Formatting Context. */
}
.col_right {
    width: 150px;
    float: right;
    background-color: rgb(200,200,200); 
}
p {
    font:100 1em arial, helvetica, sans-serif;
    margin-bottom:50px;
}
.zone_under {
    width: 90%; 
    box-sizing: border-box; 
    margin: 20px auto 0;
    padding: 10px;      
    font: 300 1em arial, helvetica, sans-serif;
    background-color: rgb(240,240,240);
    border: .5em solid rgb(0,0,0);
    overflow: hidden;   
}

Answer 1

是的，它很笨拙

• overflow: hidden作为建立块格式上下文的一种方式是一种黑客。正确的方法是display: flow-root，但这是最近的提案，在任何地方都不支持。
• 使用浮点进行布局可能被认为是一种黑客
• padding-bottom: 1000px; margin-bottom: -1000px绝对是一个黑客，你需要它，因为你使用了黑客浮标。

现代的方式是弹性框：

.wrapper {
  display: flex;
}
.col_left {
  width: 25%;
  order: 1;
}
.col_middle {
  flex: 1;
  order: 2;
}
.col_right {
  width: 150px;
  order: 3;
}

Answer 2

是的，对我来说看起来很笨拙。从响应式设计的角度来看，看起来并不好。在 1000 像素下填充可能适用于一种屏幕分辨率，但我们需要考虑许多屏幕尺寸。更好的办法如下。

.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;
    }

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

然后，您可以使用媒体查询使其在手机和平板电脑上看起来不错。

@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的网格布局。

https://getbootstrap.com/examples/grid/

如果您只需要引导程序的网格布局，而没有其他功能特性，则可以使用引导程序定制器来减小文件大小。

http://getbootstrap.com/customize/

只需取消选中所有复选框，并在通用 css 下选中网格系统并下载。让生活比想出黑客更容易。