كيفية وضع عنصر div أسفله مباشرةً ومحاذاة إلى اليسار مع div آخر

Question

الإعداد الخاص بي هو هذا - أنا أعمل على ASP.NET MVC 4.بالنسبة لواجهة المستخدم وعلى وجه التحديد لهذا السؤال، فأنا أفعل ذلك من أجل _Layout لذلك فهو إعداد أساسي جدًا سيتم مشاركته لجميع الصفحات.أنا أستخدم حيث أستطيع bootstrap 3 لكن الموقع يستهدف أجهزة العرض الكبيرة فقط، لذا سيتم تنفيذ الكثير من الأشياء باستخدام أدوات أخرى.

ولكن بالنسبة للتخطيط الأساسي الذي أستخدمه bootstrap 3 العناصر المصممة ولكن تم تخصيصها بالفعل لذلك أعتقد أن هذا سؤال عام يتعلق بـ CSS/JS أكثر من معالجة إطار عمل/lib محدد.فقط ضعها هنا حتى أتمكن من الحصول على أفضل حل لمشكلتي وهو:

الألوان المختلفة هي فقط لتسهيل الفهم ولأنني لا أملك الكثير من الخبرة، سيكون من الأسهل بالنسبة لي أن أشرح ما أريد تحقيقه.انا املك <div id="top-nav-wrapper"> والغرض منها هو فقط الاحتفاظ بالأقسام الثلاثة الأخرى وتوفير صورة الخلفية، لأن التخطيط يتم توسيطه وثباته 970px لذا، في حالة الدقة الأكبر، أحصل على هذا الشريط من كلا الطرفين.أسلوب div المجمع هذا بسيط جدًا:

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
}

داخل #top-nav-wrapper div لدي ثلاث علامات div أخرى.الأول هو الذي ذو خلفية زرقاء داكنة - <div class="container">.هنا أستخدم bootstrap 3 فصل .container لكنها مخصصة وأسلوبها هو:

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

بعد هذا القسم يتبع الآخر بأزرار التنقل والخلفية الصفراء الداكنة -

<div class="container" style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important;">

مرة أخرى باستخدام .container فئة مع بعض التصميم الإضافي الذي يمكنك رؤيته.

القسم الأخير هو الخط الرمادي - <div class="container" style="background-color: grey; height: 50px;"> ومرة أخرى أستخدم المحدد مسبقًا .container فئة مع بعض التغييرات.

يمثل المربع ذو الحدود الحمراء من الصورة ما أريد إضافته الآن.أحتاج إلى قائمة رأسية ولكن التصميم يتطلب أن تكون القائمة الرأسية أسفل القسم الأصفر الداكن مباشرةً.كما ترون Home رابط القائمة ملون باللون الأزرق.الجانب الأيسر هو الطرف الأيسر من div أيضًا، لذا ما أحتاجه هو عدم الاهتمام بكيفية تغيير حجم النافذة بحيث تكون القائمة الرأسية دائمًا أسفل القسم الأصفر مباشرة، محاذاة إلى أسفل اليسار.ولتوضيح الأمر أكثر، سأضع صورة لما يجب أن يبدو عليه:

لذا فإن أول شيء أريده ولا أعرف كيفية القيام به هو وضع div بحيث يكون أسفل div القائمة ومحاذاته إلى اليسار.والثاني هو أنني بحاجة إلى إظهار القائمة فوق القسم الرمادي، تمامًا كما هو موضح في الصورة أعلاه.فقط لإتمامها - الفكرة هي أن تحتوي القائمة الرأسية دائمًا على عرض Home رابط القائمة.ولكن أعتقد أنني حصلت على هذا مع القليل jQuery لذا فإن سؤالي يدور بالكامل حول كيفية وضع div بالطريقة التي أريدها؟

Answer 1

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

في هذه الحالة، سأقوم بإعداد حاوية واحدة بعرض 970 بكسل مع هوامش تلقائية لتوسيطها، ثم أضع الحاويات الأخرى بداخلها.إذا كان الصندوق الأحمر موجودًا داخل الحاوية التي يبلغ عرضها 970 بكسل، وبما أنك تعرف ارتفاع الصندوق الرمادي، فيمكنك أيضًا تصميم المربع الأحمر margin-top: -50px

إليك بعض التعليمات البرمجية، ويمكنك رؤيتها في هذا JSFiddle.

لغة البرمجة:

<div id="top-nav-wrapper">
    <div class="container">
        <div style="height: 50px; background: #006"></div>
        <div style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important; background: #eb0;"></div>
        <div style="background-color: grey; height: 50px;"></div>
    </div>
</div>
<div id="main-wrapper">
    <div class="container">
        <div style="background: red; width: 200px; height: 400px; margin-top: -50px"></div>
    </div>
</div>

CSS:

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
    width: 100%;
}

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container div {
    width: 100%;
}