CSS布局??左定宽度右自适应宽度并且等高布局_html/css_WEB-ITnose
方法一:
别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧。
HTML Markup
<div id="container"> <div id="wrapper"> <div id="sidebar">Left Sidebar</div> <div id="main">Main Content</div> </div> </div>
CSS Code
<style type="text/css"> * { margin: 0; padding: 0; } html { height: auto; } body { margin: 0; padding: 0; } #container { background: #ffe3a6; } #wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/ position: relative; vertical-align: bottom; } #sidebar { float: left; width: 200px; margin-left: -200px;/*==此值等于左边栏的宽度值==*/ position: relative; } #main { float: left; } #maing, #sidebar{ min-height: 200px; height: auto !important; height: 200px; } </style>
查看在线DEMO。
方法二
HTML Markup
<div id="container"> <div id="left" class="aside">Left Sidebar</div> <div id="content" class="section">Main Content</div> </div>
CSS Code
<style type="text/css"> *{margin: 0;padding: 0;} #container { overflow: hidden; } #left { background: #ccc; float: left; width: 200px; margin-bottom: -99999px; padding-bottom: 99999px; } #content { background: #eee; margin-left: 200px;/*==此值等于左边栏的宽度值==*/ margin-bottom: -99999px; padding-bottom: 99999px; } #left, #content { min-height: 200px; height: auto !important; height: 200px; } </style>
查看在线的DEMO。
方法三:
HTML Markup
<div id="container"> <div id="content">Main Content</div> <div id="sidebar">Left Sidebar</div> </div>
CSS Code
*{margin: 0;padding: 0;} #container{ background-color:#0ff; overflow:hidden; padding-left:220px; /* 宽度大小等与边栏宽度大小*/ } * html #container{ height:1%; /* So IE plays nice */ } #content{ background-color:#0ff; width:100%; border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/ margin-left:-220px;/* 宽度大小等与边栏宽度大小*/ float:right; } #sidebar{ background-color:#f00; width:220px; float:right; margin-left:-220px;/* 宽度大小等与边栏宽度大小*/ } #content, #sidebar { min-height: 200px; height: auto !important; height: 200px; }
查看在线DEMO效果。
方法四:
HTML Markup
<div id="container2"> <div id="container1"> <div id="col1">Left Sidebar</div> <div id="col2">Main Content</div> </div> </div>
CSS Code
*{padding: 0;margin:0;} #container2 { float: left; width: 100%; background: orange; position: relative; overflow: hidden; } #container1 { float: left; width: 100%; background: green; position: relative; left: 220px;/* 宽度大小等与边栏宽度大小*/ } #col2 { position: relative; margin-right: 220px;/* 宽度大小等与边栏宽度大小*/ } #col1 { width: 220px; float: left; position: relative; margin-left: -220px;/* 宽度大小等与边栏宽度大小*/ } #col1,#col2 { min-height: 200px; height: auto !important; height: 200px; }
查看在线DEMO。
方法五:
HTML Markup
<div id="container1"> <div id="container"> <div id="left">Left Sidebar</div> <div id="content"> <div id="contentInner">Main Content</div> </div> </div> </div>
CSS Code
*{padding: 0;margin: 0;} #container1 { float: left; width: 100%; overflow: hidden; position: relative; background-color: #dbddbb; } #container { background-color: orange; width: 100%; float: left; position: relative; left: 220px;/* 宽度大小等与边栏宽度大小*/ } #left { float: left; margin-right: -100%; margin-left: -220px;/* 宽度大小等与边栏宽度大小*/ width: 220px; } #content { float: left; width: 100%; margin-left: -220px;/* 宽度大小等与边栏宽度大小*/ } #contentInner { margin-left: 220px;/* 宽度大小等与边栏宽度大小*/ overflow: hidden; } #left, #content { min-height: 200px; height: auto !important; height: 200px; }
查看在线DEMO。
针对上面的面试题要求,我一共使用了五种不同的方法来实现,经过测试都能在各浏览器中运行,最后我有几点需要特别提出:
上面所有DEMO中,要注意其方向性的配合,并且值要统一,如果您想尝试使用自己布局需要的宽度值,请对照相关代码环节进行修改; 上面所有DEMO中,没有设置他们之间的间距,如果您想让他们之间有一定的间距,有两种方法可能实现,其一在上面的DEMO基础上修改相关参数,其二,在相应的里面加上"div"标签,并设置其“padding”值,这样更安全,不至于打破你的布局 因为我们这里有一列使用了自适应宽度,在部分浏览器下,当浏览器屏幕拉至到一定的大小时,给我们带来的感觉是自适应宽度那栏内容像是被隐藏,在你的实际项目中最好能在“body”中加上一个“min-width”的设置。
Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds





HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
