100px auf der rechten Seite<\/div>
<\/div>
<\/body>
<\/html>
\n
Das Obige ist die korrekte Gesamtbreite der linken und rechten Struktur, die genau 400 Pixel entspricht
\n<\/p>Fehler:
Wenn wir die Gesamtbreite unver?ndert lassen, betr?gt die linke Seite 300 Pixel und die rechte Seite 120 Pixel. Sehen wir uns an, welche Probleme auftreten. Der DIV-CSS-Code lautet wie folgt : <\/p>\n
<\/p>
Berechnung der linken und rechten Strukturbreite www.webjx.com<\/title><br><style type=\"text\/css\"><br>.webjxcom{width:400px;}<br>. zuo{ float :left; width:300px;background:#CCC; ;<br><body>
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1><br><div id="377j5v51b" class=\"webjxcom\"><br><div id="377j5v51b" class=\"zuo\">300px links<\/div><br><div id="377j5v51b" class= ?Sie“> 100px auf der rechten Seite<\/div><br><\/div><br><\/body><br><\/html><br>\n<br>Auf dem Bild oben k?nnen wir sehen, dass die linke und rechte Struktur nicht bündig sein k?nnen und die rechte Seite nach unten f?llt, da die Gesamtbreite etwa 20 Pixel betr?gt. <br>Auf diese Weise treten in der Praxis aufgrund unserer Nachl?ssigkeit bei der Berechnung im Allgemeinen Probleme mit der Kompatibilit?t von Fehlausrichtungen auf, wenn der Unterschied gering ist, was von uns nicht entdeckt wird Kompatibilit?t k?nnen wir mit der Breitenberechnung beginnen. <br>\n<br>Beispiel 2: Es gibt einen 1-Pixel-Rand in der linken und rechten Struktur.<br>Im Allgemeinen gibt es einen 1-Pixel-Rand in der linken und rechten Struktur, und dann werden einige R?nder hinzugefügt, wenn wir die linke und rechte Struktur festlegen. Wir müssen die Randbreite und die Breite der linken und rechten Struktur zusammen berechnen. <\/p>Korrektes Beispiel: <p>CSS- und <br><\/p>HTML-Code <p><br> lautet wie folgt: <br>\n<br><!DOCTYPE html><span style=\"color: #333333;\"><head><span style=\"color: #333333;\"><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/><\/span> <title>Berechnung der linken und rechten Strukturbreite www.webjx.com<\/title><\/span><style type=\"text\/css\"><\/p>.webjxcom{width:400px;}<p>. zuo{ float:left; width:298px; border:1px solid #F00;} <br> <\/style><br><\/head><br><body><br><div id="377j5v51b" class=\"webjxcom\"><br><div id="377j5v51b" class=\"zuo\">Links 300px<\/ div><br><div id="377j5v51b" class=\"you\">100px rechts<\/div><br><\/div><br><\/body><br><\/html> <br>\n<br>Da sowohl die linke als auch die rechte Struktur eine Breite von 1 Pixel haben, müssen Sie die Breite des linken und rechten Randes von jeweils 2 Pixel subtrahieren, sodass die linke Seite am Ende eine Breite von 298 Pixel und die rechte Seite eine Breite von hat 98px<br>\n<br>Wenn der Rand nicht subtrahiert wird, treten folgende Effekte auf: <br>\n<br><br><\/p>DIV CSS<p><\/p>Berechnung der prozentualen Breite festlegen<p>Manchmal müssen wir auch den Prozentsatz zur Berechnung der Breite verwenden, normalerweise ist es auch die prozentuale Gesamtbreite, die 100 % nicht überschreiten darf<\/p>\n<p>Achten Sie bei der Berechnung der CSS-Breite auf die Zusammenfassung: <span style=\"color: #333333;\">Ob es sich um eine Links-Rechts-Struktur, ein mehrspaltiges Layout oder eine einzelne DIV-Breitenlayouteinstellung handelt, Sie müssen auf das Verst?ndnis und die Berechnung der Breite achten , insbesondere bei Verwendung von Polsterung, Rand, Rahmen usw.<span style=\"color: #333333;\"><\/span>CSS-Eigenschaften<\/span><br>, zu diesem Zeitpunkt müssen wir alle die von ihnen festgelegte belegte Breite berechnen und festhalten, dass die Summe der Breiten ist Die gleiche Zeile ist kleiner oder gleich der Gesamtbreite. Wenn sie gr??er als die Gesamtbreite ist, wird ein Kompatibilit?tsproblem mit falscher Platzierung angezeigt. Daher k?nnen wir bei einer allgemeinen Fehlausrichtung mit der Berechnung der Breite beginnen. Natürlich gibt es viele Gründe für eine Fehlausrichtung. Dies ist auch eine der Methoden, um das Problem der Fehlausrichtung zu l?sen. <\/p>\n<p><br><span style=\"color: #333333;\"><div id="377j5v51b" class=\"clear\"><\/div><\/span><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/de/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://m.miracleart.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://m.miracleart.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://m.miracleart.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://m.miracleart.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://m.miracleart.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://m.miracleart.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://m.miracleart.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://m.miracleart.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://m.miracleart.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('de')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="suchen" onclick="searchs('de')"><img src="/static/imghw/find.png" alt="suchen"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Deutsch<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:;" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/de/div-tutorial.html"
class="phpgenera_Details_mainL1a">HTML-Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Fehlausrichtung des CSS-Webseitenlayouts: Berechnung der CSS-Breite</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Fehlausrichtung des CSS-Webseitenlayouts: Berechnung der CSS-Breite</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/de/member/887227.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/de/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Oct 15, 2016 am 10:32 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>Warum die Breite berechnen<br>Die Berechnung der Pixelbreite von Webseiten dient dazu, dass das <span style="color: #333333;"><span style="color: #333333;">CSS</span></span>Webseitenlayout sauber und kompatibel ist. Es ist üblich, dass wir beim Layout der linken und rechten Strukturwebseite die Breite der gesamten Seite berechnen oder die Breite nicht berechnen, ob die Breite zu gro? oder zu klein ist es werden Probleme auftreten. </p>
<p>So berechnen Sie die CSS-Breite<br>Beispiel 1: Wir berechnen den Layoutstil einer linken und rechten Struktur. <br>Wenn die Gesamtbreite 400 Pixel betr?gt, sollte die Summe aus links und rechts weniger als 400 Pixel betragen. Dann haben wir m?glicherweise 300 Pixel links und 100 Pixel rechts. <br>Richtiger Code: <br> </p>
<p><!DOCTYPE html><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>Berechnung der linken und rechten Strukturbreite www.webjx.com