The height is known and the left and right widths are fixed. 5 ways to implement a three-column layout-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

The height is known and the left and right widths are fixed. 5 ways to implement a three-column layout

一个新手

Oct 16, 2017 am 10:52 AM

fixedwidthabout

As the saying goes, a good memory is not as good as a bad writing. The same is true for writing code. If you don’t write down something you have read, it will not stay in your mind for long. So after working for so long, I slowly uploaded the previously recorded knowledge, firstly for sharing, and secondly for a better summary! Okay, without further ado, let’s get to the point.

First method: float

<style>
    *{
        padding:0;
        margin:0;
    }
    .big div{
        height:100px;
    }
    .big .left{
        width:300px;
        float:left;
        background:red;
    }
    .big .right{
        width:300px;
        float:right;
        background:yellow;
    }
    .big .center{
        background:blue;
    }
</style>
<body>
<div class="big">
    <div class="left">
       
    </div>
    <div class="right">
      
    </div>
    <div class="center">
        浮动解决方案
    </div>
</div>

The first solution is basically It’s not difficult at all, and you should use it a lot every day!

The second method: absolute positioning

<span style="color: #008080"> <style><br/> .position{<br/>        margin-top:10px;<br/>    }<br/>    .position>div{<br/>        position:absolute;<br/>        height:100px;<br/>    }<br/>    .position .left{<br/>        left:0;<br/>        width:300px;<br/>        background:red;<br/>    }<br/>     .position .right{<br/>        right:0;<br/>        width:300px;<br/>        background:yellow;<br/>    }<br/>    .position .center{<br/>        left:300px;<br/>        right:300px;<br/>        background:blue;<br/>    }<br/></style><br/><body><br/><div class="position"><br/>    <div class="left"><br/>       <br/>    </div><br/>    <div class="right"><br/>      <br/>    </div><br/>    <div class="center"><br/>        绝对定位方案2<br/>    </div><br/></div><br/></body></span><span style="color: #0000ff"></span>

The second method is also easy to achieve the effect.

The third method: flexbox

<style>
 .flex{
        margin-top:120px;
        display:flex;
    }
    .flex>p{
        height:100px;
    }
    .flex .left{
        width:300px;
        background:red;
    }
    .flex .center{
        flex:1;
        background:blue;
    }
    .flex .right{
        width:300px;
        background:yellow;
    }</style><body><p class="flex">
    <p class="left">
       
    </p>
    <p class="center">
        flex方案    </p>
    <p class="right">
      
    </p></p></body>

## The fourth method: table layout

<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">.table</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        margin-top</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">10px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">100%</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        display</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">table</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">100px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
    .table>p</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        display</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">table-cell</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
     .table .left</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">red</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
    .table .center</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">blue</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
    .table .right</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><br/><br/><span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="table"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="left"</span><span style="color: #0000ff">></span>
       
    <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="center"</span><span style="color: #0000ff">></span><span style="color: #000000">
        table方案    </span><span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="right"</span><span style="color: #0000ff">></span>
      
    <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span><span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span><span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

#table solution is also implemented, but now we may rarely use table layout.

The fifth method: grid layout grid

<style>
  .grid{
        margin-top:10px;
        display:grid;
        width:100%;
        grid-template-rows:100px;
        grid-template-columns: 300px auto 300px;
    }
    .grid .left{
        background:red;
    }
    .grid .center{
        background:blue;
    }
    .grid .right{
        background:yellow;
    }</style><body><p class="grid">
    <p class="left">
       
    </p>
    <p class="center">
        grid方案    </p>
    <p class="right">
      
    </p></p></body>

##The grid layout method is also implemented, CSS3 grid layout It is somewhat similar to bootstrap's grid layout, which uses a grid to divide the blocks occupied by elements.

The question is not over, we continue to discuss. Which of the five solutions is better? The author has always believed that technology is not good or bad, it all depends on where you use it.

Personally think the advantages and disadvantages of the five methods:

1. Floating: good compatibility. If there are clear requirements for compatibility, floating should meet the needs, but you must deal with the surrounding environment. The relationship between elements, because if you don’t pay attention to floating, it may cause problems such as confusing page layout. However, there are many ways to solve the side effects caused by floating, which we will not discuss here.

2. Absolute positioning: simple and direct, but it will cause the parent element to break away from the normal document flow and the child elements will also break away.

3.flex: It seems to be perfect at present, but now there are more or less compatibility issues with slightly more perfect technologies. The same style is not supported by IE8! (IE!)

4. Table layout: Although there is no big problem with the table layout, it will be very cumbersome when we want to refine the structure. At the same time, the height of the three cells in the table layout will be the same. Changes are also not conducive to our layout.

5. Grid layout: The code is beautiful and concise, but it still has compatibility issues. But the future is bright!

The above is the detailed content of The height is known and the left and right widths are fixed. 5 ways to implement a three-column layout. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

耳机左右怎么分rl 耳机左右怎么戴Feb 22, 2024 pm 05:10 PM

L表示着left，戴在左耳朵上，R表示着right，戴在右耳上。解析1通常情况下耳机上边都是会有标识，英语字母的简称L和R，L表示着left，戴在左耳朵上，R表示着right，戴在右耳上。R、L标明的具体位置不固定，以具体耳机为标准。一部分耳机会把R标识为红色的。手机原装配送的耳机，通常情况下带话筒和按钮的一边为右。补充：耳机的种类1耳机是人的随身携带音响的象征。耳机可分为两种规范：OMTP规范一般被称为国家标准，CTIA一般称之为国际标准。耳机按照其换能方法分类，具体有：动圈方式、动铁方式、静

如何设置固定不更换的电脑锁屏壁纸Jan 17, 2024 pm 03:24 PM

一般来说，计算机的桌面背景图案是可以由使用者自行调节的。然而，对于部分Windows10用户而言，他们希望能够固定电脑桌面背景图片，但却不知该如何设定。实际上，操作起来十分简便易行。电脑锁屏壁纸怎样固定不换动1、把你要设置的图片右键选择设置成背景图片2、win+R打开运行，然后输入“gpedit.msc”3、依次展开到：用户配置-管理模板-控制面板-个性化4、点击个性化，再选择“阻止更改桌面背景”5、选择已启用6、之后再打开设置进入到背景，看到这些小字就说明已经设置好了。

将VirtualBox固定磁盘转换为动态磁盘，反之亦然Mar 25, 2024 am 09:36 AM

在创建虚拟机时，系统会要求您选择磁盘类型，您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘，后来意识到需要动态磁盘，或者相反，该怎么办?好!你可以把一种转换成另一种。在这篇文章中，我们将看到如何将VirtualBox固定磁盘转换为动态磁盘，反之亦然。动态磁盘是一种虚拟硬盘，它最初具有较小的大小，随着您在虚拟机中存储数据，其大小会相应增长。动态磁盘在节省存储空间方面非常高效，因为它们只占用所需的主机存储空间。然而，随着磁盘容量的扩展，可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

如何在 Windows 11 中始终保持小部件面板可见Aug 13, 2023 pm 07:13 PM

如何始终显示小部件板在Windows11中打开？好吧，您可以从下载并安装最新的Windows更新开始。在预览体验计划的最新更新补丁中，Microsoft透露，开发和金丝雀频道中的用户将能够将小部件板固定为打开状态，因此小部件板始终只需一目了然。如何始终显示小部件板在Windows11中打开根据Microsoft，要将板子固定打开，只需单击板右上角的图钉图标即可。一旦您的板被固定打开，小部件板将不再轻视关闭。固定板时，您仍可以通过以下方法将其关闭：通过任务栏上的“小部件”按钮打开小部件板。当小部件

功耗测试及评估(rx588功耗测试与评估)Dec 31, 2023 pm 09:38 PM

rx588功耗250W左右。rx580看电影耗电，但是耗电并不多。很多视频都需要硬件进行解码。多多少少都会用得到显卡。xfx深红和迪兰恶魔单卡+7700K的平台功耗在380w左右，7700k算100w，其他设备加一起最多30w，也就是rx588的功耗在250w左右，双卡整机功耗就是630w到650w，700w以上的才够，但这个时候电源的负荷太高，影响寿命，按照6成-8成的负荷计算，理想的电源额定功率在850到1000w，具体还要看用什么cpu和超不超频。h61主板支持588显卡吗H61主板本身是

电脑便签怎么固定在桌面Feb 15, 2024 pm 04:00 PM

Windows10操作系统预先植入了便捷的便笺功能，以便尊贵的用户能随心所欲地撰写临时记事或信息。假设阁下期望以此为工具，快速且轻松找到并使用便签，抑或是希望将这个实用的小程序固定在宽大的屏幕中央以方便查阅，只需简单几步即可实现以上愿望：电脑便签怎么固定在桌面1、点击开始再点击这里的便签2、打开以后便签就可以直接在这里输入对应的内容了，而且也可以点击上面的加号来添加一个全新的内容3、如果你想要用第三方的便签软件的话那么可以进入到对应的软件的设置里面来操作。

解决win11开始菜单无法固定的方法Jan 06, 2024 pm 08:09 PM

很多朋友喜欢在开始菜单中直接打开软件，这就需要将应用程序直接固定到其中，但是发现在win11中无法固定到开始菜单，这可能是因为我们操作有误，下面就一起来看一下正确的方法吧。win11开始菜单无法固定怎么办1、首先我们点击下方任务栏中的搜索按钮。2、打开后在上方搜索想要固定的应用程序，找到后点击右侧的“固定到开始屏幕”3、等待系统显示图示的以固定提示。4、完成后就可以发现选择的程序已经被固定到开始菜单了。

Vue导航栏固定问题的解决方法Jun 30, 2023 am 10:52 AM

如何处理Vue开发中遇到的导航栏固定问题开发网页时，导航栏的固定效果是非常常见的需求。当用户滚动页面时，导航栏可以保持在固定的位置上，以便用户能够方便地访问页面的其他部分。然而，在Vue开发中，由于其特殊的单页面应用结构，导航栏的固定问题可能会稍有不同。在本文中，我们将介绍一些处理Vue开发中遇到的导航栏固定问题的方法。方法一：使用CSS固定定位（posit

See all articles