Css三列自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #left{
            background: #9f9;
            width: 400px;
            position: relative;
            right: 400px;
            margin-left: -100%;
        }
        #main{
            width: 100%;
            background-color: #6f6;
        }
        #right{
            background-color: #3f3;
            width: 400px;
            margin-right: -400px;
        }
        .col{
            float: left;
            height: 666px;
            text-align: center;
        }
        #page{
            padding-left: 400px;
            padding-right: 400px;
        }


    </style>
</head>
<body>
<div id="page">
    <div id="main" class="col">
        <h1>白居易《牡丹》</h1>
        <img src="img/test.jpg"width="50px">
        <p>绝代只西子，众芳惟牡丹。</p>
    </div>
    <div id="left" class="col">
        <h1>王安石《梅》</h1>
        <img src="img/test.jpg"width="50px">
        <p>墙角数枝梅，凌寒独自开。</p>
    </div>
    <div id="right" class="col">
        <h1>张学良《咏兰诗》</h1>
        <img src="img/test.jpg"width="50px">
        <p>花中真君子，风姿寄高雅</p>
    </div>
</div>
</body>
</html>

本文链接：https://blog.csdn.net/li3196672779/article/details/72837371

智能推荐

【css】css实现div两列布局（固定和自适应）（两种方法）

css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩...

目标检测随笔。anchor的生成

目标的真实边界(ground_truth bounding box)。而以像素为中心生成多个大小和宽高比(aspect ratio)的边界框，称为anchor box。基于深度学习的目标检测不使用传统的滑窗生成所有的窗口作为候选区域，FasterRCNN提出的RPN网络，处理较少但准确的候选区域。锚框即可理解为某个检测点处的候选区域。假设图像高hhh,宽为www。以每个像素为中心，大小s&is...

数据结构与算法C++描述(14)---二叉搜索树

1、二叉搜索树的概念二叉搜索树是一棵可能为空的二叉树，一棵非空的二叉搜索树有满足如下特征：二叉树中所有的键值都是唯一的；根节点所有左子树的键值（如果有的话）小于根节点的键值；根节点所有右子树的键值（如果有的话）大于根节点的键值；根节点的左右子树也都是二叉搜索树。三个二叉搜索树如下： 2、二叉搜索树的C++描述对于二叉搜索树，主要操作有插入一个元素（Insert）删除键值为k的元素（D...

数据库

什么是数据库？简单的说，数据库就是一个存放数据的仓库，这个仓库是按照一定的数据结构（数据结构是指数据的组织形式或数据之间的联系）来组织，存储的，我们可以通过数据库提供的多种方法来管理数据库里的数据。数据库诞生于1950年，随着信息技术的发展和人类社会的不断进步，特别是2000年后，数据库不在仅仅是存储和管理数据了，而转变成用户所需要的各种数据管理的方式，数据库有很多种类和功能，从最简单的存储有...

Centos7搭建Hadoop3.1.3完全分布模式

详细搭建可以参考我的Hadoop2.8.0安装准备本文下载的是3.1.3版本的Hadoop 关闭防火墙虚拟机的准备安装3个虚拟机并实现ssh免密码的登录安装3个centos7虚拟机安装3个机器，机器分别叫master slave1 slave2 在/etc/hostname下修改主机名其他两台也是一样修改主机映射修改/etc/hosts文件修改这3台机器的/etc/hosts文...

Css三列自适应布局

智能推荐

猜你喜欢