it-swarm.asia

div ينهار فوق عنصر تم تغيير موضعه

أريد قائمة بالصفوف التي لها الشكل التالي:

+------------------------#main-----------------------+
|                                                    |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| +------+ pellentesque. Proin tristique tortor sit  |
|          amet magna ornare eleifend. Aliquam       |
|          placerat sapien vitae tellus mattis       |
|          euismod.                                  |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| |      | pellentesque.                             |
| +------+                                           |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| +------+ vel est porttitor et laoreet enim         |
|          pellentesque.                             |
|                                                    |
|                                                    |
+----------------------------------------------------+

لدي كل ما سبق في div id = "main". كل صورة وزوج نص في div class = "ProdList". كما ترون أعلاه ، فإن الصور سوف تختلف في الارتفاع ولكن ليس في العرض. قد يكون أو لا يكون النص أعلى من الصورة. هذا هو ما يسبب مشكلتي. أريد هامش 20 بكسل أسفل كل . ProdList بغض النظر عما إذا كانت الصورة أو الفقرة أعلى. تعطي css أدناه نتائج مثالية طالما أن النص أعلى من الصورة. ولكن ، منذ أن أقوم بوضع الصورة ، فإن . ProdList لم تعد تقلق المحيطة بها. يؤدي هذا . ProdList أدناه لعرضها على الصورة إذا كانت الصورة أعلاه أعلى من النص. لقد حاولت إعادة تحديد موضع النص بدلاً من الصورة لكني واجهت المشكلة المعاكسة. كيف يمكنني الحصول على . ProdList يحتوي كل من الصورة والنص بشكل كامل؟

إليك المغلق الذي جربته:

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}
/*just a centered, fixed width area*/

.ProdList {margin-bottom: 20px; position: relative;}
/*contains an image and a paragraph*/

.ProdList p {margin-left: 110px;}
/*makes room for the picture*/

.ProdList img {position: absolute;top: 0;}
/*moves the picture to the upper left of .ProdList*/

إن إضافة "مسح: كلاهما" لا يبدو مفيدًا أيضًا.

نظرًا لأن هذه بيانات جدولية افتراضية ، أفترض أنه يمكنني استخدام جدول دون أن أغضب آلهة css كثيرًا لكنني متأكد من أن هذا ممكن. أنا فقط في عداد المفقودين شيء.

3
Jeff

هذا يعمل لي:

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}

.ProdList {
     padding-bottom: 20px; 
     float: left; 
     clear: left; 
     width: 100%; 
     border:2px solid green
}
/*contains an image and a paragraph*/

.ProdList p {
     margin-left: 50px;
     float:left;
     width:60%;
}
/*makes room for the picture. Play with margin and width % for best fit*/

.ProdList img {float: left;width:100px}
/*moves the picture to the upper left of .ProdList*/

"الحدود" على ProdList DIV هي فقط حتى أتمكن من رؤية نطاقات DIV للتأكد من أنها لا تنهار. كثيرا ما أضع

div {
   border: 1px solid red;
}

في الجزء السفلي من ملفات CSS الخاصة بي حتى أتمكن من إزالة الضغط عليها عندما أرغب في معرفة أين تقع ملفات DIV الخاصة بي بالفعل.

الشيء الصعب الوحيد هنا هو أنه نظرًا لعدم وضع الصورة في وضع مطلق ، فإن هامش الفقرة أصبح الآن ذا صلة بجانب الصورة. إذا كانت جميع صورك متماثلة ، فيمكنك إخراج العرض على img (الذي يمتد الصور على أي حال - لقد قمت بالتقاط صور قليلة من نفس العرض تقريبًا ، ولكن مع ارتفاعات مختلفة.

PDATE:

العرض الإضافي: 100٪ على div ProdList لتجعل هذا العمل يعمل على IE7 ، والعرض: 60٪ في الفقرة لجعله يعمل مع كل من IE و Firefox. قد لا تزال بحاجة إلى tweeking.

2
CMPalmer

إن أبسط طريقة هي التخلص من عناصر تحديد المواقع ، وتعويم الصورة والفقرة ببساطة. ثم أضف إما _overflow: hidden_ أو _float: left_ إلى العناصر _.ProdList_.

0
DisgruntledGoat

هناك حل حلو جدا ينفذها facebook لهذه المشكلة بالضبط. إذا كان لديك firebug مثبتًا في فايرفوكس ، فيمكنك التحقق منه بسهولة. على سبيل المثال هنا:

http://www.facebook.com/pages/Yahoo-Nachrichten/108333755877035؟ref=ts&v=wall (لديهم دائمًا صورة وبعض النص بجانبها)

الحصول على الصورة: float: left والنص يحصل: display: table-cell؛ محاذاة رأسية: أعلى. عرض: 1000px؛

العيب الوحيد هو أنه سيتعين عليك كتابة بعض التعليمات البرمجية المحددة لـ IE6 و IE7 ، والتي يمكنك العثور عليها من خلال إلقاء نظرة على صفحة الفيسبوك في تلك المتصفحات باستخدام شريط أدوات المطور

0
andrej