سؤال

هنا هو سيناريو بلدي. لدي حاوية DIV لديها (N) عناصر الأطفال داخلها. لهذا المثيل، دعنا نقول أن هناك 2 divs داخل الحاوية DIV:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

حاوية الحاوية ستكون نسبة مئوية من Viewport، قل 80٪. الآن، ما أبحث عنه هو هذين الدين الداخليين (COL1 & COL2) لتكون مضمون مع بعضهما البعض واتخاذ نفس القدر من المساحة. لذلك يجب أن تبدو النتيجة شيئا مثل هذا:

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+  

أو إذا تم تغيير عرض الحاوية يجب أن يؤدي إلى شيء مثل هذا:

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

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

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

المحلول

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

#col1, #col2 {
    float: left;
    width: 50%;
}

نصائح أخرى

جعل col1 و col2 يمتد (وليس divs) مع

vertical-align:top
display:inline-block
width:50%

من الواضح (ضبط العرض لحساب هوامشك / الحشو. وأوصت باستخدام النسب النسبية للهوامش / الحشو بحيث تضيف ما يصل إلى 100٪ فقط:http://ejohn.org/blog/sub-pixel-problems-in-css/)

الحل المفضل لدي

استخدام تحديد المواقع بالنسبة إلى الحاوية الخارجية:

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

لاحظ أنك تترك نفسها تقريبا 2٪ في الوسط. ال #col1 و #col2 يجب أن تكون محاذاة الآن.

حلول أخرى

مع CSS3: استخدام column-count: 2 وكسر العمود بعد أولا div.

إذا كنت تشعر حقا مثل العائمة، فقم فقط #col1 { float: left; width: 50%; }

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

ربما استخدام display: table; من شأنه أن يساعد؟ http://jsfiddle.net/g4dgz/119/

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