正文

两列布局(代码片段)

BluesQian  BluesQian  2022-10-25  171

关键词：

两列布局

效果：

4.1 左列定宽,右列自适应

(1)利用float+margin实现

html代码:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css代码:

#left 
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;

#right 
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大于等于#left的宽度*/

(2)利用float+margin(fix)实现

html代码:

<body>
<div id="left">左列定宽</div>
<div id="right-fix">
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#left 
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;

#right-fix 
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/

#right
    margin-left: 100px; /*大于或等于#left的宽度*/
    background-color: #0f0;
    height: 500px;

(3)使用float+overflow实现

html代码:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css代码:

#left 
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;

#right 
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/

(4)使用table实现

html代码:

<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>

css代码:

#parent
    width: 100%;
    display: table;
    height: 500px;

#left 
    width: 100px;
    background-color: #f00;

#right 
    background-color: #0f0;

#left,#right
    display: table-cell;  /*利用单元格自动分配宽度*/

(5)使用绝对定位实现

html代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#parent
    position: relative;  /*子绝父相*/

#left 
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;

#right 
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;

(6)使用flex实现

html代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#parent
    width: 100%;
    height: 500px;
    display: flex;

#left 
    width: 100px;
    background-color: #f00;

#right 
    flex: 1; /*让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：*/
    background-color: #0f0;

4.2 左列自适应,右列定宽

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent
    height: 500px;
    padding-left: 100px;  /*抵消#left的margin-left以达到#parent水平居中*/

#left 
    width: 100%;
    height: 500px;
    float: left;
    margin-left: -100px; /*正值等于#right的宽度*/
    background-color: #f00;

#right 
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;

(2)使用float+overflow实现

html代码:

<body>
<div id="parent">
    <div id="right">右列定宽</div>
    <div id="left">左列自适应</div>   <!--顺序要换一下-->
</div>
</body>

css代码:

#left 
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #f00;

#right 
    margin-left: 10px;  /*margin需要定义在#right中*/
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;

(3)使用table实现

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent
    width: 100%;
    height: 500px;
    display: table;

#left 
    background-color: #f00;
    display: table-cell;

#right 
    width: 100px;
    background-color: #0f0;
    display: table-cell;

(4)使用绝对定位实现

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent
    position: relative;  /*子绝父相*/

#left 
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;  /*大于等于#rigth的宽度*/
    background-color: #f00;
    height: 500px;

#right 
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;

(5)使用flex实现

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent
    height: 500px;
    display: flex;

#left 
    flex: 1;
    background-color: #f00;

#right 
    width: 100px;
    background-color: #0f0;

4.3 一列不定,一列自适应

(盒子宽度随着内容增加或减少发生变化,另一个盒子自适应)

(1)使用float+overflow实现

html代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#left 
    margin-right: 10px;
    float: left;  /*只设置浮动,不设宽度*/
    height: 500px;
    background-color: #f00;

#right 
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;

(2)使用flex实现

html代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#parent
    display: flex;

#left  /*不设宽度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;

#right 
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/

bfc_两列布局(代码片段)

BFC布局规则2：BFC不会与floatbox重叠当overflow不为visible时会生成BFC布局结构：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>两列布局</title><style>*margin:0;padding:0;bodymin 查看详情

css常见两列布局三列布局(代码片段)

一、两列布局：　方法一：采用position：absollute;并设置margin-left的值。#leftposition:absolute;width:300px;top:0px;left:0px;background:#F00;#rightbackground:#0FC;margin-left:300px;<divid="left">左边定宽</div>&l 查看详情

两列自适应布局(代码片段)

第一种写法： wxml:<viewclass="page_first"><viewclass="page_li"wx:for="4"></view></view>wxss:.page_firstpadding:30rpx;box-sizing:border-box;display:f 查看详情

两列布局：6种方法(代码片段)

面试过程中总会文档两列布局，左边等宽，右边自适应几种方法？以下提供6种为君解忧<divid="wrap"><divid="left"></div><divid="right"></div></div>需求就是左侧定宽，右侧自适应。（height先... 查看详情

小程序中的网格布局(代码片段)

...使用的布局。在电商场景中，我们经常会看到商品的两列布局，通常在CSS中，两列布局可以使用网格布局的方案解决。我们本篇就讲解一下CSS的网格布局，并结合一个布局的小案例来讲解一下网格布局在实际场景... 查看详情

小程序中的网格布局(代码片段)

瀑布流布局(代码片段)

...的、视觉上像瀑布一样的布局。这里简化一下，只要两列等宽布局展示图片即可。思路两列布局，直接使用flex布局实现即可。不过，这里不能设置align-items为center，如果设置了将会使图片列居中显示，不符合... 查看详情

七栅格系统布局(grid)(代码片段)

...grid-template-row-->定义列|grid-template-row:100px100px;|-->定义两列，每列(高度)为100px|grid-template-row:repeat(2,50%);|-->定义两列，每列(高度)为父元素的50% 查看详情

flex做的圣杯布局(代码片段)

...的圣杯布局，大家可以参考一下子　　　首先圣杯布局是两列固定宽度，中间自适应。　　　我直接说一下步骤，上图，上图　　　　　　　1.步骤1　　　　　2.步骤2　　　　　　　　上面就是基本的步骤，下面我把代码给... 查看详情

div标准布局示例(代码片段)

1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>横向两列布局</title>6<style>7*margin:0;padding:0;8#warp9width:960px;10margin:0auto;11margin-top:10px;1 查看详情

常用布局的实现（两列布局三列适应布局，两列等高适应布局等）

两列布局：左侧定宽，右侧自适应方法一：利用float和负外边距<style>*{ margin:0; padding:0;}.main,.sitebar{ font:bolder20px/300px;}.main{ width:100%; float:left;}.main.content{ margin-left:200px; background-color:red;}.siteb 查看详情

bootstrap布局两列或者多列表单

1,代码如下:<divclass="form-group"><labelfor="starttime"class="col-sm-2control-label">实际开始时间</label><divclass="col-md-4"><inputclass="form-control"type="text"id="starttime"readon 查看详情

React Native iOS 应用程序中的两列布局

】ReactNativeiOS应用程序中的两列布局【英文标题】：TwocolumnlayoutinReactNativeiOSapp【发布时间】：2017-04-2015:24:32【问题描述】：在我的ReactNative应用程序中，我试图为一组项目实现两列布局。我正在处理的代码：<Content><Gridstyle... 查看详情

css两列自适应布局的4种思路

前面的话　　前面已经介绍过css两列布局中单列定宽单列自适应布局的6种思路的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思... 查看详情

两列布局

很多网站都使用了两列布局，就是左边固定，右边自适应的布局。两列布局有多种方法，现在来列举一下第一种：margin+float/ margin+absolute 将左边设置float或者... 查看详情

css两列布局的多种实现方式及原理。

　　两列布局是非常常见的需求在实际项目中，实现的方式也有很多。这里提供几种实现方式和原理。供大家参考　　页面基本布局如下代码所示：　　1<divclass="main">2<divclass=‘left‘>3左侧14</div>5<divclass=‘right‘&... 查看详情

两列布局中单列定宽单列自适应布局的5种思路

思路一:float　　说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。如果各浮动元素的高度不同时，可能会出犬牙交错的效果【1】float+margin　　将定宽的... 查看详情

两列布局——只用右浮动

通过这个实验我明白了一个知识点，做左右结构的时候，不用把左边的写上左浮动，只需要把有浮动的块放到最前边，并设置有浮动，左边的放在有浮动的下边而且不用管，这样，父元素也不用清楚浮动，左边的元素也不用左浮... 查看详情