html: tengo problemas para alinear

tldr; Estoy intentando colocar la sección aparte a la izquierda de la sección del artículo (como una barra lateral/columna lateral, sin embargo, mi "flotante" no parece funcionar en absoluto. ¿Cómo hago esto sin editar el código HTML? Sólo quiero editarlo en el archivo CSS. ¡Soy un principiante, así que agradezco la ayuda!

* {
box-sizing: border-box;
}
section {background-color: cornsilk;overflow:auto;float: right;}
article {color: black;float: right;}
article footer {font-style: italic;font-size: 15px;color: black; background-color: cornsilk;text-align: left;}
#wrapper {width: 960px;
margin: 0 auto;}

h1 {
background-color: #666;

text-align: center;
font-size: 35px;
color: white;
}
footer {
background-color: #666;

text-align: center;
font-size: 35px;
color: white;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
float: right;

}
aside { 
float: left;

}

<div id="wrapper">
  <header><h1>text</h1></header>
  <article>
    <section>
      <header><h2>Om CSS</h2></header>
      <p>text</p> 
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>     
    </section>
    <section>
      <header><h2>Om märkspråk</h2></header>
      <p>text</p> 
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>     
    </section>
  </article>

  <aside> 
    <h1>Bildgalleri</h1>
    <img src="https://stackoverflow.com/questions/66832935/images/html5.png " alt="html5">
    <img src="https://stackoverflow.com/questions/66832935/images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

No utilices flaot para diseñar. Utilice css-grid o flexbox en su lugar. Con su código, no recomendaría comenzar de nuevo y programar de forma limpia para un diseño específico. Con su estructura seráSerá difícil recuperar el código incluso con css-grid y grid-area o flexbox con flex-order.

- tacoshy

27/03/2021 a las 15:36

Gracias por tu respuesta, luego comprobaré las otras opciones (lamentablemente solo puedo cambiar el CSS, no el código HTML ni empezar de nuevo)

- Chris

27/03/2021 a las 15:39

------------------------------------

Aquí hay una solución en la que su HTML no cambia en absoluto (lo que en realidad haríaNo lo recomiendo en absoluto, ya que el orden de los elementos no es el ideal, y tampoco lo es la estructura HTML en general).

Lo principal es que usé display: flex con flex-direction: row-reverse en el #wrapper y apliqué position: absoluta al encabezado y pie de página, además de algunos rellenos y márgenes en otros elementos para crear espacio para ese encabezado. y pie de página. También eliminé todos los flotadores. Otros detalles/configuraciones ver más abajo.

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
#wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
}
section {
  background-color: cornsilk;
  padding-bottom: 50px;
}

article {
  color: black;
  padding: 60px 0;
}

article footer {
  font-style: italic;
  font-size: 15px;
  color: black;
  background-color: cornsilk;
  text-align: left;
}

header h1 {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  margin: 0;
}
aside h1 {
  margin-top: 60px;
  margin-right: 20px;
}
#wrapper > header {
  position: absolute;
  width: 100%;
  height: 40px;
  margin-right: 20px;
}
section:first-of-type > header {
   margin-top: 40px;
}
footer {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

<div id="wrapper">
  <header>
    <h1>text</h1>
  </header>
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
    <section>
      <header>
        <h2>Om märkspråk</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="https://stackoverflow.com/questions/66832935/images/html5.png " alt="html5">
    <img src="https://stackoverflow.com/questions/66832935/images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

3

Me pregunto si hay algún motivo específico para demandar.posición absoluta en lugar de orden flexible como mi solución. ¿Hay algún inconveniente en mi solución que no veo?

- tacoshy

27/03/2021 a las 16:26

1

@tacoshy No, no lo hay. Es simplemente diferente

- Johannes

27/03/2021 a las 16:30

¡Gracias, este también funciona muy bien! Estudiaré las ediciones que incluiste.ya que son nuevos para mi

- Chris

27/03/2021 a las 16:32

------------------------------------

Eliminé todo tu CSS para simplificarlo. Por supuesto que puedes empezar a cambiar el estilo de todo.

La mejor solución general en términos de compatibilidad será la demanda de flex-box. CSS-Grid también funcionaría, pero tiene soporte limitado para IE11 y otros. 13.

En primer lugar, su principal problema es el uso de flotador, que no debe utilizarse con fines de diseño. float solo está diseñado para usarse para hacer flotar imágenes dentro de un párrafo (similar a Word o periódicos). Desafortunadamente, todavía se piensa repetidamente, ya que fue un truco antes de HTML5 y el desarrollo de flexbox.d css-grid en 2012. Desde 2015, tanto flexbox como css-grid son una técnica bien establecida y no hay más motivos para hacer un mal uso del float-hack.

El siguiente tema es su estructura HTML. Tiene varios elementos de pie de página y encabezado y los anida dentro de la estructura. Esto requiere la del > selector para llamar solo a un elemento de encabezado o pie de página específico y no a todos.

El problema de la estructura enxt es el orden. Semánticamente mostrarás los elementos de arriba a abajo o de izquierda a derecha. Sin embargo tu <aparte> Se supone que el elemento debe aparecer antes del <artículo> elemento mientras ocupa el último lugar dentro de la estructura. Esto requiere el uso de orden (orden flexible) dentro del CSS para cambiar el orden.

Entonces lo que hice fue usar #wrapper { display: flex; envoltura flexible: wrap } esto aplica flexbox al contenedor y le dice a los elementos que se ajusten en lugar de nowrap (valor inicial). La intención es que el ehaderr tenga un ancho del 100% y los otros elementos se muestren debajo de él en lugar de desbordarse hacia la derecha.

Entonces verás que las etiquetas <header>, <footer>, <aside> y <artículo> Los elementos obtuvieron la propiedad y el valor de orden, lo que me permite reordenar la estructura dentro de CSS como se explicó anteriormente.

Si necesita más explicaciones o información, no dude en preguntar.

* {
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#wrapper > header {
  width: 100%;
  border: 1px solid red;
  order: 1;
}

#wrapper > aside {
  width: 30%;
  border: 1px solid green;
  order: 2;
}

#wrapper > article {
  width: 70%;
  border: 1px solid blue;
  order: 3;
}

#wrapper > footer {
  width: 100%;
  border: 1px solid yellow;
  order: 4;
}

<div id="wrapper">
  <header>
    <h1>text</h1>
  </header>
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
    <section>
      <header>
        <h2>Om märkspråk</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="https://stackoverflow.com/questions/66832935/images/html5.png " alt="html5">
    <img src="https://stackoverflow.com/questions/66832935/images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

2

Sí, ¡exactamente esto! Gracias. No he visto este uso "#wrapper > artículo" por ejemplo antes. Y también necesito comprobar qué "orden" hace

- Chris

27/03/2021 a las 16:09

perfecto, agregué una explicación que debería cubrir > selector así como la propiedad del pedido.

- tacoshy

27/03/2021 a las 16:29

------------------------------------

Creo que quieres hacer esto

* {
  box-sizing: border-box;
}

section {
  background-color: cornsilk;
  overflow: auto;
  float: right;
}

article {
  color: black;
  float: right;
}

article footer {
  font-style: italic;
  font-size: 15px;
  color: black;
  background-color: cornsilk;
  text-align: left;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

h1 {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
}

footer {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  float: right;
}

aside {
  position: absolute;
  top: 0;
  float: left;
}