يتم تقسيم عرض البكسل والنسبة المئوية جنبًا إلى جنب

Question

لقد وجدت الكثير من الأسئلة المشابهة، وجربت العديد من الحلول (بما في ذلك بعض ما يسمى بتخطيطات CSS "الكأس المقدسة")، لكنها لا تفعل ما أحتاج إليه تمامًا.

لدي div (كتلة تحتوي على CSS) بمعرف right.بداخله على الجانب الأيسر، أريد div ذو عرض ثابت (شريط مقسم، لكن لا يهم ما يتم استخدامه من أجله؛بطاقة تعريف splitpane);على اليمين، وملء بقية المساحة، قسم آخر (id right-box أقل).

لقد حاولت إنشاء قسمين داخليين display: inline-block (مع vertical-align: top)، مع ضبط الجانب الأيسر على width: 3px, ، ولكن بعد ذلك لا توجد طريقة لتعيين الحق في الحصول على عرض 100% - 3 بكسل.لقد حاولت أيضًا استخدام float: left/margin-left: -100%/margin-left: 3px خدعة، ولكن لديها نفس المشكلة:100% بالإضافة إلى 3px يتجاوز الكتلة التي تحتوي على الأصل ويؤدي إلى ظهور شريط التمرير.(بالطبع، ليس شريط التمرير في حد ذاته هو المشكلة؛يمكن أن أستخدم overflow: hidden لإزالته، ولكن بعد ذلك سيتم اقتطاع المحتوى الموجود على اليمين.)

حاليا أنا أستخدم width: 99.5% لقسم div الصحيح، ولكن هذا يعد اختراقًا سيئًا (ويخضع للتجاوز اعتمادًا على عرض الشاشة).يبدو قليلا مثل هذا:

<div id="right"><div id="splitpane"></div><div id="right-box">
  ...
</div></div>

مع CSS كما يلي (الإصدار العائم، لكن إصدار الكتلة المضمنة مشابه):

#right {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 85%;  /* this is part of a larger div */
}
#right-box {
  width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
  height: 100%;
}
#splitpane {
  float: left;
  width: 3px;
  height: 100%;
  background: white;
  border-left: solid gray 1px;
  border-right: solid gray 1px;
  cursor: e-resize;
}

هل من الممكن حتى القيام بذلك؟هذا لتطبيق داخلي، لذا تحتاج الحلول فقط إلى العمل في Firefox 3 (إذا كانت خاصة بـ FF3، فمن الأفضل أن يكون ذلك لأن الحل متوافق مع المعايير ولكن المتصفحات الأخرى ليست كذلك، وليس لأنه يستخدم Firefox فقط شفرة).

Answer 1

وهذا ممكن. لأن عناصر مستوى الكتلة تلقائيا توسيع لتولي أي مساحة الأفقي المتبقية، يمكنك الاستفادة من عنصر مستوى الكتلة بجانب عنصر طرحت المزالة مع العرض المطلوب.

<style type="text/css">
    div {
        height: 100px;
    }
    #container {
        width: 100%;
    }
    #left {
        background: #FF0;
    }
    #splitpane {
        position: relative;
        float: right;
        background: #000;
        width: 3px;
    }
</style>

<div id="container">
    <div id="splitpane"></div>
    <div id="left"></div>
</div>

http://jsfiddle.net/georeith/W4YMD/1/

Answer 2

وعناصر div هي نوع عنصر الخطأ لهذا لأنها لا "تتحدث" مع بعضها البعض. يمكنك تحقيق ذلك بسهولة مع الجدول:

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

وال 100٪ سيجعل rightBox على أوسع نطاق ممكن ولكن في حدود الجدول.

Answer 3

لماذا لم تستخدم الهامش الأيسر (نظرًا لأنه كان تخطيطًا عائمًا) في المربع الأيمن؟

لذلك لا حاجة لإنشاء قسم التقسيم ...

#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

نعم شيء من هذا القبيل، أنا أكره div الفارغ، فهو ليس دلاليًا ويشبه وضع مقسم على طريقة الجدول "القديمة"

Answer 4

إذا فإن صندوق الحق شعبة # لن يؤدي الا لاحتواء غير طرحت محتوى قد يكون فكرة لوضعت للتو المحتوى داخل #right بدلا من ذلك والسماح لها بالالتفاف حول #splitpane طرحت.