freeCodeCamp

2.2 KiB

Raw Blame History

id	title	localeTitle	challengeType	videoUrl
587d78a3367417b2b2512ace	Push Elements Left or Right with the float Property	Empuje los elementos hacia la izquierda o hacia la derecha con la propiedad float	0

Description

La siguiente herramienta de posicionamiento no usa realmente la position , pero establece la propiedad de float de un elemento. Los elementos flotantes se eliminan del flujo normal de un documento y se empujan hacia la left o hacia la right de su elemento principal que contiene. Se usa comúnmente con la propiedad de width para especificar cuánto espacio horizontal requiere el elemento flotante.

Instructions

El marcado dado funcionaría bien como un diseño de dos columnas, con la section y los elementos a aside lado uno del otro. Dé al elemento #left un float de la left y el elemento #right un float de la right .

Tests

tests:
  - text: El elemento con id <code>left</code> debe tener un valor <code>float</code> de <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: El elemento con id <code>right</code> debería tener un valor <code>float</code> de <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.2 KiB Raw Blame History