مؤخرًا، عندما كنت أرسم واجهة، واجهت مطلبًا: ارسم خطًا رأسيًا في الواجهة، ويجب أن يشغل ارتفاع هذا الخط العمودي القسم الأصلي بالكامل تلقائيًا (أي أن ارتفاع هذا الخط العمودي هو نفسه حيث أن ارتفاع القسمين الأعلى هو نفس الارتفاع).
عادة نرسم خطًا أفقيًا ونستخدم العلامة <hr> فقط. عندما نرسم خطًا رأسيًا، نجد أنه لا يمكن العثور على العلامة. بعد البحث عن معلومات على الإنترنت، يوصى عمومًا باستخدام js. لقد كنت مذعورًا وأردت استخدام CSS خالصًا، وأخيراً وجدت الحل، وسأشارككم طريقتي أدناه.
أضف div آخر إلى القسمين الفرعيين، واضبط الحد الأيسر (الأيمن) ليكون مرئيًا، واستخدم مبدأ استخدام القيمة الموجبة والسالبة لـ padding-bottom|margin-bottom لتعويض بعضها البعض. على سبيل المثال، إعداد padding-bottom:1600px; margin-bottom:-1600px ؛ يمكننا فهمه على النحو التالي: يمكن استخدام الحشو لتوسيع الملصق الخارجي ولكن لا يتم استخدام الهامش لتوسيع الملصق الخارجي. أي أنه عند استخدام الحشو السفلي لتوسيع ارتفاع الملصق الخارجي، يستخدم الملصق الخارجي التجاوز: مخفي لإخفاء الارتفاع الزائد، بحيث يمكن محاذاة الارتفاع مع العمود الأعلى ويرتبط الهامش بـ تخطيط الوحدة النمطية، والهامش يمكن أن يعوض الحشو. يسمح المربع الممتد للتخطيط بالبدء من قسم المحتوى.
هنا هو الرمز:
body{ Margin-top:100px; border-left:200px; } .leftdiv{ float:left width; :400px; لون الخلفية:#CC6633 } .rightdiv{ float:right; لون الخلفية:#CC66FF; } .centerdiv{ float:left; width:50px; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content -اكتب content=text/html; charset=gb2312 /> <title>طريقة رسم الخط العمودي</title> <link href=../css/demo.css rel=stylesheet type=text/css /> </head> <body> <div class=maindiv> <div class=leftdiv><br><br><br><br><br></div> <div class=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br></div> </div> </body> </html >تقديم:
بالمناسبة، اكتب الأفكار والرموز الرئيسية لـ JS
قارن ارتفاع قسمين فرعيين أيهما أعلى. يمكنك أيضًا تحقيق الهدف عن طريق اختيار جعل الحدود المجاورة لقسم div الأطول مرئية.
ما يلي هو رمز js
function myfun(){ var div1=document.getElementById(content); var div2=document.getElementById(side); var h1=div1.offsetHeight; borderRight=1px متقطع #B6AEA3 }else{; div2.style.borderLeft=1px متقطع #B6AEA3; تلخيصما ورد أعلاه هو مقدمة المحرر لكيفية رسم خط عمودي بين علامتي div في HTML، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!