CSS السوائل: عمود عائم مع أقصى عرض وتفوق

StackOverflow https://stackoverflow.com/questions/2642813

  •  27-09-2019
  •  | 
  •  

سؤال

أنا أستخدم تصميم السوائل في الموضوع الجديد الذي أعمل عليه في مدونتي. غالبًا ما أدون عن الكود وأدرج <pre> كتل داخل المنشورات. ال float: left العمود لمنطقة المحتوى لديه ملف max-width بحيث يتوقف العمود بعرض أقصى معين ويمكن تقليصه أيضًا:

+----------+     +------+
|   text   |     | text | 
|          |     |      |
|          |     |      |
|          |     |      |
|          |     |      |
|          |     |      |
+----------+     +------+
    max           shrunk

ما أريده هو <pre> العناصر التي يجب أن تكون أوسع من عمود النص حتى أتمكن من وضع رمز ملفوف 80 حرفًا بدون قضبان التمرير الأفقية. لكني أريد <pre> عناصر للتدفق من منطقة المحتوى ، دون التأثير على سيولة:

+----------+     +------+
| text     |     | text | 
|          |     |      |
+----------+--+  +------+------+
| code        |  | code        |
+----------+--+  +------+------+
|          |     |      |
+----------+     +------+
    max           shrunk

لكن، max-width يتوقف <pre> في هناك: يبقى عرض العمود عند المحدد max-width حتى عندما أتقلص المتصفح إلى ما وراء هذا العرض.

لقد استنسخت المشكلة في سيناريو الحانة العارية:

<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>

لقد لاحظت أن القيام بأي مما يلي يعيد السيولة:

  1. مسح ال <pre> (DOH ...)
  2. مسح ال float: left

الحل الذي أستخدمه حاليًا هو إدراج <pre> العناصر في "فواصل" في عمود البريد ، بحيث تكون عرض شرائح البريد و <pre> تتم إدارة الأجزاء بشكل متبادل على وجه الحصر:

+----------+     +------+
| text     |     | text | 
+----------+     +------+
+-------------+  +-------------+
| code        |  | code        |
+-------------+  +-------------+
+----------+     +------+
+----------+     +------+
    max           shrunk

لكن هذا يجبرني على إدراج إغلاق إضافي وفتح <div> العناصر في علامة ما بعد ما أفضل الحفاظ على دلالة البكر.

من المسلم به ، ليس لدي فهم كامل لكيفية عمل نموذج المربع مع عوامات مع محتوى فائض ، لذلك لا أفهم لماذا مزيج من float: left على الحاوية و <pre> داخلها تشل max-width من الحاوية.

أنا أراقب نفس المشكلة على Firefox/Chrome/Safari/Opera. يبدو IE6 (The Crazy One) سعيدًا طوال الوقت.

هذا أيضًا لا يبدو أنه يعتمد على وضع المراوغات/المعايير.

تحديث

لقد أجريت المزيد من الاختبارات لمراقبة ذلك max-width يبدو أنه يتم تجاهله عندما يكون العنصر float: left. ألقيت نظرة على الفصل W3C Box Model لكنني لم أستطع على الفور رؤية ذكر واضح لهذا السلوك. أي مؤشرات؟

هل كانت مفيدة؟

المحلول

جلس margin-right: -240px; float: left; على ال <pre> عنصر لجعله يشغل مساحة أفقية أقل قدر الإمكان ، وفي الوقت نفسه قد يفيض الوالد <div> عنصر مع 240px. تذكر أن تتأكد من أن <p> العناصر تطهر العناصر العائمة على كلا الجانبين (clear: both). مثال كامل أدناه:

<!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>

نصائح أخرى

أعتقد أن هذا يجب أن يفعل ما تبحث عنه ، ولكن قد تحتاج إلى تعديله قليلاً للحصول عليه للعمل في الموقع.

<!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;
}

يعمل مع Chrome و Firefox ، مما يجعلني أعتقد أنه سيعمل على Opera على الأقل ، Safari و IE8 أيضًا.

إذا كان هذا يكسر IE6 ، يمكنك استخدام هذا المحدد لإخفاء القاعدة من المتصفح:

div > pre {
    display: inline-block;
}

في مثالك (مع إضافة أحرف إضافية):

<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>

هذا قد يعمل

pre {
  position:relative;
  float:left;
  z-index: 1;
}

يقوم الموضع النسبي بإعداد "البوب" لأبعاد العمود دون إزالته من تدفق المستند ، ويجب على تعويم ضبط عرض TEH قبل احتواء جميع محتواها.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top