freeCodeCamp

2.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a3367417b2b2512ace	Push Elements Left or Right with the float Property	0		دفع عناصر اليسار أو اليمين مع الخاصية العائمة

Description

الأداة المواقع التالية لا فعلا استخدام position ، ولكن يحدد float الملكية عنصر. تتم إزالة العناصر العائمة من التدفق العادي للمستند ودفعها إما إلى left أو right من عنصرها الأصلي المحتوي على العناصر. يتم استخدامه بشكل شائع مع خاصية width لتحديد مقدار المساحة الأفقية التي يتطلبها العنصر المضمن.

Instructions

إن العلامات نظرا يعمل كذلك تخطيط عمودين، مع section و aside عناصر بجانب بعضها البعض. امنح العنصر #left float من left #right float على right .

Tests

tests:
  - text: يجب أن يحتوي العنصر ذو المعرف <code>left</code> على قيمة <code>float</code> <code>left</code> .
    testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
  - text: يجب أن يكون للعنصر الذي له <code>right</code> معرف قيمة <code>float</code> من <code>right</code> .
    testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'

Challenge Seed

<head>
  <style>
  #left {

    width: 50%;
  }
  #right {

    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <aside id="right">
    <h2>Sidebar</h2>
    <p>Links</p>
  </aside>
</body>

Solution

// solution required

2.4 KiB Raw Blame History