Home > Web Front-end > HTML Tutorial > Three-column middle adaptive layout (from NetEase)_html/css_WEB-ITnose

Three-column middle adaptive layout (from NetEase)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:45:41
Original
903 people have browsed it

<div class="g-bd5 f-cb">    <div class="g-sd51">        <p>左侧定宽</p>    </div>    <div class="g-mn5">        <div class="g-mn5c">            <p>中间自适应</p>        </div>    </div>    <div class="g-sd52">        <p>右侧定宽</p>    </div></div>
Copy after login

/* 三列中间自适应布局 */.g-bd5{margin:0 0 10px;}.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}.g-mn5{float:left;width:100%;}.g-mn5c{margin:0 200px 0 240px;}
Copy after login

Left side fixed width

Middle adaptive

Right fixed width

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template