Fluid CSS: schwimmende Säule mit max-width und Überlauf
https://stackoverflow.com/questions/2642813
-
27-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin mit einem Fluid Layout in dem neuen Thema, dass ich arbeite für mein Blog weiter. Ich blogge oft über Code und umfassen <pre> Blöcke innerhalb der Beiträge. Die float: left Spalte für den Inhaltsbereich hat eine max-width so dass die Säule bei einer bestimmten maximalen Breite hält und auch verkleinert werden kann:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
Was ich will, ist für die <pre> Elemente als die Textspalte breiter zu sein, so dass ich horizontale Bildlaufleisten 80 Zeichen umwickelten Code ohne passen. Aber ich will die <pre> Elemente Überlauf aus dem Inhaltsbereich, ohne seine Fließfähigkeit zu beeinträchtigen:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Aber, stoppt max-width sobald ich Einsatz der überhängenden <pre> dort Flüssigkeit zu sein. Die Breite der Spalte bleibt an der angegebenen max-width auch wenn ich über diese Breite des Browsers schrumpfen
Ich habe das Problem mit diesem Minimalen Szenario wiedergegeben:
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
Ich habe bemerkt, dass eine der folgenden tun bringt wieder die Fluidität:
- Entfernen Sie die
<pre>(doh ...) - Entfernen Sie die
float: left
Die Abhilfe, die ich zur Zeit bin mit ist die <pre> Elemente in den „Brüche“ in der Post Spalte einzufügen, so dass die Breiten der Postsegmente und die <pre> Segmente verwaltet werden gegenseitig ausschließend:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Aber diese Kräfte mir zusätzliche Schließ- und Öffnungs <div> Elemente in den Post-Markup eingefügt werden, die ich eher semantisch unberührten halten würde.
Zugegeben, ich habe nicht ein volles Verständnis davon, wie das Box-Modell arbeitet mit Schwimmern mit Inhalt überfüllt, so dass ich nicht verstehen, warum die Kombination von float: left auf den Behälter und der <pre> im Innern des max-width des Behälters lähmen .
ich das gleiche Problem auf Firefox / Chrome / Safari / Oper zu beobachten. IE6 (der Verrückte) scheint glücklich die ganze Zeit.
Dies scheint auch nicht abhängig von Macken / Standards-Modus.
Update
Ich habe weitere Tests durchgeführt, dass max-width zu beobachten scheint ignoriert werden, wenn das Element eine float: left hat. Ich warf einen Blick auf das Modell Kapitel W3C-Box, konnte aber nicht sofort eine ausdrückliche Erwähnung dieses Verhalten sehen. Alle Zeiger?
Lösung
Set margin-right: -240px; float: left; auf dem <pre> Elemente, um es als weniger horizontalen Raum wie möglich zu machen besetzen und zugleich kann das übergeordneten <div> Element mit 240px überfluten. Denken Sie daran, um sicherzustellen, dass die <p> Elemente löschen Elemente auf beiden Seiten (clear: both) schwimmen. Komplettes Beispiel unten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Solution</title>
</head>
<body>
<div style="float: left; background-color: cyan; max-width: 460px;">
<p style="background-color: magenta; clear: both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre style="float: left; max-width: 700px;
background-color: yellow; margin-right: -240px;">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p style="background-color: magenta; clear: both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</body>
</html>
Andere Tipps
ich denke, das tun sollte, was Sie suchen, aber Sie könnten es brauchen zu zwicken leicht es an die Arbeit in situ zu erhalten.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
}
#wrapper
{
float: left;
width: 100%;
}
#content
{
float: left;
width: 100%;
max-width: 500px;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
}
#content-pad
{
margin: 50px;
padding: 50px 0 40px 50px;
background-color: #CCC;
}
p, pre
{
margin: 0 50px 10px 0;
line-height: 1.6em;
}
pre
{
padding: 20px;
width: 560px;
background-color: #333;
color: #FFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="content-pad">
<p>Fusce euismod nunc vitae orci vestibulum adipiscing. Nam id quam libero, sed convallis elit. Etiam interdum, urna et imperdiet euismod, nisi erat commodo elit, sed convallis magna est quis sem. Fusce tempor aliquet est, et ornare eros vulputate et. Vivamus arcu augue, pretium vel fermentum in, gravida sed elit. Vestibulum ut ligula ac quam hendrerit ullamcorper. Phasellus id justo augue. Integer a eros ante. Vivamus sapien mi, placerat a viverra pharetra, dignissim sit amet ipsum. Fusce nunc nunc, tempus ut aliquet sit amet, consectetur sed quam. Cras ligula enim, bibendum eget luctus a, convallis sit amet nisl. Nullam in quam in lectus faucibus lobortis vel pulvinar ante.</p>
<pre>Here is some code!
We're going to make sure that it has a full eighty characters to play in.
12345678901234567890123456789012345678901234567890123456789012345678901234567890</pre>
<p>Nullam in sapien vitae dui tincidunt elementum. Curabitur condimentum vulputate sem ornare pharetra. Fusce in dolor eget neque viverra sagittis a a orci. Vivamus blandit leo eget orci viverra quis hendrerit velit tempus. Donec in erat risus. Nullam scelerisque faucibus ante, ultricies tristique dolor laoreet sit amet. Duis sit amet tortor dolor, vel interdum ipsum. Sed sed nibh vel ipsum commodo cursus. Proin fermentum nunc in velit tincidunt imperdiet sit amet nec neque. Suspendisse neque ante, luctus sit amet pulvinar eu, congue laoreet magna. Aenean sit amet porttitor quam. Mauris hendrerit vulputate tempus. Curabitur mauris magna, laoreet congue rutrum condimentum, condimentum in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
<!-- this next element just maintains the margin properly -->
<div style="clear:both; height: 0; overflow: hidden;"></div>
</body>
</html>
CSS:
pre {
display: inline-block;
}
Arbeiten für Chrome und Firefox, die mich denken lässt, wird es auf Arbeit atleast Opera, Safari und IE8 auch.
Wenn diese Pausen IE6 Sie diesen Selektor verwenden können, um die Regel aus dem Browser zu verbergen:
div > pre {
display: inline-block;
}
In Ihrem Beispiel (mit zusätzlichen Zeichen hinzugefügt):
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue; display: inline-block;">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit dfsf sdf sdf sdf sdf
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
Dies könnte Arbeit
pre {
position:relative;
float:left;
z-index: 1;
}
Position relativ macht die Pre „Pop-out“ von den Abmessungen der Säule, ohne sie aus dem Dokumentenfluss zu entfernen und Schwimmer soll die Breite des teh pre anpassen, um alle seine Inhalte enthält.
