Heim > Artikel > Web-Frontend > Feste Breite der rechten Spalte, Inhalt der linken Spalte erscheint zuerst und Layout mit adaptiver Breite (Codebeispiel)

Feste Breite der rechten Spalte, Inhalt der linken Spalte erscheint zuerst und Layout mit adaptiver Breite (Codebeispiel)

WBOYOriginal: 2016-05-16 12:09:261492Durchsuche

In diesem Kapitel werden wir eine feste rechte Spaltenbreite einführen, und der Inhalt der linken Spalte wird zuerst angezeigt und gleichzeitig wird das Layout an die Breite angepasst. Es hat einen bestimmten Referenzwert Ich hoffe, es wird Ihnen hilfreich sein.

Wie es funktioniert

#wrapper muss hasLayout auslösen, sonst schwebt der Inhalt manchmal seltsamerweise direkt, aber es können auch andere Methoden verwendet werden. Wenn Sie lediglich den in diesem Beispiel geforderten Effekt erzielen möchten, müssen Sie nicht einmal #wrapper verwenden.

#left definiert 100 % Breite und verwendet margin:0 0 0 -200px, um den gesamten linken Block mit einem Versatz von 200px nach links zu platzieren, und verwendet dann den margin:0 0 0 200px von #innerLeft zum Herausschieben Der Inhalt,

#right ist nur ein einfaches Float, #innerRight hat eine große Wirkung und wird nur gewohnheitsmäßig beibehalten. Es vereinfacht nicht nur unsere Steuerung, sondern kann auch die Struktur für die nächste Änderung unverändert lassen Layout.

Zusätzlich zur Reparatur der rechten und linken Seite können Freunde, die Zeit haben, es ausprobieren

Es gibt Probleme

IE-Browserversionen Unter IE7 ist die Mindestbreite nicht verfügbar. Wenn sie zu klein ist, sieht sie hässlich aus. Wir werden das Problem im nächsten Artikel lösen

Erweiterte Funktionen

Wenn Sie möchten, dass die linke und rechte Spalte gleich hoch sind, können Sie kann sich darauf beziehen: Lösen Sie die Spaltenhöhenanpassung (Spaltenhöhe). Fünf Methoden
können ebenfalls gespielt werden: feste mittlere Spaltenbreite, gleiche Breite der linken und rechten Spalte und adaptive
kann auch erweitert werden. Eine solche Funktion: Layoutmethode mit minimaler Höhe von 100 % und Fußzeile unten

Codebeispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局 - Beautiful Style « 样式之美 » loaoao.com </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="KEYWords" content="fixed,css,xhtml,effect" /> 
<meta name="DEscription" content="固定右栏宽度, 左栏内容先出现同时自适应宽度 " /> 
<meta name="author" content="aoao" /> 
<meta content="all" name="robots" /> 
<link rel="start" href="http://www.loaoao.com" title="Home" /> 
<style type="text/css"> 

body{ 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    min-width:620px; 
    margin:0; 
    padding:0; 
} 

#wrapper{ 
    float:left; 
    display:inline; 
    margin:0 30px; 
    background-color:#ccc; 
} 
#header,#footer{ 
    clear:both; 
    padding:10px; 
    text-align:center; 
} 
#left{ 
    float:left; 
    width:100%; 
    margin:0 0 0 -200px; 
} 
#innerLeft{ 
    margin:0 0 0 200px; 
    background-color:#efefef; 
} 
#right{ 
    float:left; 
    width:200px; 
    background-color:#ddd; 
} 
.inner { 
    padding:2px 12px; 
} 
p{ line-height:1.6em} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"> 
    <h1>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局</h1> 
</div> 
<div id="left"> 
    <div id="innerLeft" class="inner"> 
     
        <h2>工作原理</h2> 
        <p>#wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的，我直接用float的，可以用其他方式。其实如果只是要做到这个例子要的效果连#wrapper都可以不要。
 
        #left定义100%宽度并利用margin:0 0 0 -200px把左边整块放在偏移入左边200px处，再利用#innerLeft的margin:0 0 0 200px再把内容撑出来，
 
        #right只是简单的浮动，#innerRight米多大作用，只是习惯性保留着，除了可以让我们的控制更简单点，还可以为下次改变布局可保持结构不变。</p> 
        <p>除了可以固定右边也可以固定左边，有空的朋友可以尝试一下</p> 
        <h2>存在问题</h2> 
        <ul> 
        <li>IE7以下版本的IE浏览器无min-width，拉太小会很难看。下篇文章再解决</li> 
        </ul> 
        <h2>扩展功能</h2> 
         
        <ul> 
            <li>如果想左右两列等高可以参考这个：<a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=45">解决列高度自适应(列高度相同)的五种方法</a> 
        </li> 
        <li> 
            也可以玩：<a href="http://lab.loaoao.com/demo/layout/fixedmiddle/">固定中栏宽度, 左右两栏宽度相等和自适应</a> 
        </li> 
        <li>还可以扩展这样的功能：<a href="http://my.opera.com/tifa/blog/show.dml/251210">最小高度100%，页脚保持在底部的布局方法</a></li> 
        </ul> 
    </div> 
</div> 

<div id="right"> 
    <div id="innerRight" class="inner"> 
        <p>这只是个简单的例子，希望对初学CSS布局的朋友有帮助。</p> 
        <p>基本还有很多功能可以写进来，怕写得太乱了，还是等下一篇，好骗点流量。</p> 
    </div> 
</div> 
</div> 
</body> 
</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein CSS-Hack für IE7_Experience ExchangeNächster Artikel：Ein CSS-Hack für IE7_Experience Exchange

In Verbindung stehende Artikel

Mehr sehen