Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > 关于position布局的问题_html/css_WEB-ITnose

关于position布局的问题_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:59:28
Original
834 Leute haben es durchsucht

<body><style>*{ margin:0; padding:0;}.header{ width:100%; background:blue; }.menu{ width:100%; background:gray; height:40px;}.center{ width:940px; margin:0 auto; height:100px; background:red; position:relative;}.left{ position:absolute; top:0; left:-420px; width:420px; height:160px; background:yellow;}.right{ position:absolute; top:0; right:-420px; width:420px; height:160px; background:yellow;}</style><div class="header">	<div class="center">    	 <div class="left"></div>         <div class="right"></div>        </div></div><div class="menu"></div></body>
Nach dem Login kopieren

效果图


left跟right是两张背景图片，要求放在center的两边，现在问题是因为right占了宽度，底部会出现滚动条，如果往header里面加overflow：hidden；滚动条消失了，但是left跟right会被下面的menu挡住了。有没有办法让left跟right不被挡住而且在menu上面。

总的来说就是要left跟right两张图片不被menu挡住，然后底部不会出现滚动条，当遇到很宽屏幕的时候能看见left跟right的全部样子。


回复讨论(解决方案)

好像只能把left跟right两个合成一个，做header的背景。。

Verwandte Etiketten：
position 布局
Quelle：php.cn
Vorheriger Artikel：Pattern Lab Nächster Artikel：CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Welches Format haben die Variablen im Rückgabewert? Ich bin ein PHP-Neuling. Ich habe einen Code gefunden: if($x<time()){return[false,'erro...
Aus 2024-04-06 21:55:20
0
1
778
Erstellen dieses speziellen Designs mithilfe eines Rasters: eine Schritt-für-Schritt-Anleitung Ich versuche, ein Layout zu erstellen, das diesem Bild ähnelt. Ich habe versucht, dieses R...
Aus 2024-04-06 20:29:08
0
2
492
Die POST-Anfrage funktioniert einwandfrei, wenn Postman verwendet wird, jedoch nicht, wenn React Axios und das Spring Boot-Backend verwendet werden Von der Reaktionskonsole erhalte ich die Fehlermeldung „Ressource kann nicht geladen werde...
Aus 2024-04-05 13:07:01
0
1
396
Meine React-App wird nach dem Ändern der Nginx-Proxy-Pass-Einstellungen nicht geladen Ich habe ReactappNodeJS-Backend und Nginx. Ich habe das Zertifikat erhalten und über Certb...
Aus 2024-04-05 11:53:10
0
1
316
Die *zwei* Höhenwerte der Leinwand abrufen? Ich versuche, zwei Höhenwerte dieser Leinwand zu ermitteln. <canvaswidth="886"...
Aus 2024-04-05 09:32:33
0
1
1360
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage