고전적인 레이아웃의 CSS는 왼쪽에서 오른쪽으로 고정 된 크기를 자동으로 적응

최근의 한 연구 고전적인 레이아웃, 특히 배경으로 왼쪽 또는 오른쪽으로 고정 폭, 매우 일반적 적응, 같은 레이아웃의 다른 쪽의 폭, 같은 더 클래스를 주문하는 등,이 구조의 대부분 비즈니스를 입력 할 때 APP는, 쌀의 무리의 목록이있을 것, 쌀은 왼쪽의 분류입니다, 권리 등 식품의 목록입니다. 어쨌든, 아주 실용적 가치 수집!

HTML 코드 봐

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>左侧固定，右侧自适应</title>
    </head>
    <body>    
        <h1>左侧固定，右侧自适应布局</h1>
        <div class="left-fixed_right-auto">
            <div class="left">
                左侧定宽左侧定宽左侧定宽左侧定宽左侧定宽左侧定宽
            </div>
            <div class="right">
                <div class="right-content">
                    右侧自适应,这是会自动换行的换行的换行的发动发动发扥扥这是会自动换行的换行的换行的发动发动发扥扥这是会自动换行的换行的换行的发动发动发扥扥这是会自动换行的换行的换行的发动发动发扥扥
                </div>
            </div>
        </div>
    </body>
</html>

CSS 코드

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/* 两列右侧自适应布局 */
.left-fixed_right-auto{
    width: 100%;
    height: 200px;
    clear: both;
    display: inline-block;
    margin-top: 20px;
}
.left{
    position:relative;
    float:left;
    width:200px;/* 数值核心1 */
    height: 100%;
    margin-right:-200px;/* 数值核心2 */
    background: red;
}
.right{
    float:right;
    width:100%;
    height: 100%;
    background: pink;
}
.right-content{
    margin-left:200px;/* 数值核心3 */
    height: 100%;
    background: blue;
}

결과를 보려면 클릭하세요

당신은 당신이 상관없이 크기를 변경하는 방법을 찾을 것, 브라우저 창을 변경 시도 할 수 있습니다, 항상이 레이아웃입니다. 이 규칙은 동적 효과는 이러한 시나리오가 실현 될 수있다 :
왼쪽의 폭의 크기를 전환하는 버튼을 클릭함으로써, 버튼을 넣어 좌측. 좌측 좁게되면 자동 오른쪽 넓히고 넓게 이루어진다 어떤 아래 좌우 자동 축소 때
JS 코드 전에, 주석 코드 CSS 다음 세 라인을 필요

.left{
    position:relative;
    float:left;
    /* width:200px; */
    height: 100%;
    /* margin-right:-200px; */
    background: red;
}
.right-content{
    /* margin-left:200px; */
    height: 100%;
    background: blue;
}

사실,이 세 줄 나는 핵심 가치 1,2,3은 분명 코멘트에 입찰을 수상했다.
(필자는 DOM을 넣어주십시오, 다음 창로드의 구현을 작성하지 않은) 자바 스크립트

var doc=document,

    /**
     * [flag 当前展示宽度状态，true:使用最大宽度;false:使用最小宽度。默认是使用最大宽度]
     * @type {Boolean}
     */
    flag=true,

    /**
     * [maxWidth，minWidth 分别是左侧的最大和最小宽度]
     * @type {String}
     */
    maxWidth="200px",
    minWidth="50px",

    //左侧按钮容器
    btnContainer=doc.querySelector(".toggle-btn"),

    //左侧容器和右侧容器，实际上就只需要操作这两个元素
    leftContainer=doc.querySelector(".left"),
    rightContent=doc.querySelector(".right-content"),

    /**
     * 切换宽度大小
     * @param {String}   width 左侧需要显示的宽度(带px)
     */
    setToggleLayout=function(width){
        leftContainer.style.width=width;
        leftContainer.style.marginRight="-"+width;

        rightContent.style.marginLeft=width;
    };

//初始化先调用一下，根据前面定义的规则，默认显示最大宽度
setToggleLayout(flag ? maxWidth : minWidth);

//点击按钮切换大小
btnContainer.onclick=function(){
    flag=!flag;
    setToggleLayout(flag ? maxWidth : minWidth);
    btnContainer.innerHTML=flag ? "收起" : "展开";
};

의 효과를 보려면 클릭
의 전체 코드
사실을,이 단순히 패키지, 당신은 jQuery를 애니메이션의 jQuery 플러그인도 쓸 수 있습니다 사용할 수 있습니다.
베스트 오리지널 게임 콜드 공식 블로그

이 문서는 재현 원숭이 2,048 https://www.mk2048.com/blog/blog.php?id=hh22011ia0j

추천