如何避免元素改变其大小和位置?

问题描述 投票:0回答:1

我有三个段落元素。三人分成三部分。我不希望它们改变大小或位置。但我无法做到这一点。也许用flex可以做到。 CSS 对我来说真的很难,有人告诉我这很常见。

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Libre y Singular</title>
    <link rel="stylesheet" type="text/css" href="css5/style4.css">
    <style type="text/css">
    body{
        resize: none;
        overflow: scroll;
    }
    </style>
</head>
<body>
    <h1>Libre y Singular</h1>
    <div>
    <section class="bilbo">
        <p>Hace muchos años me topé con algo realmente novedoso para mí, algo que podría haber conocido cuando sólo tenía 6 años y que a esa edad hubiera podido sacarle un enorme provecho gracias a las CR Tronic 360 de la empresa de mi padre, Typographics. Este algo con el que me crucé fue el Software Libre. Me resultó algo maravilloso, era mi primer contacto con el Software. Esto es algo raro, nunca conocí en toda mi vida el software privativo. Durante muchísimos años tuve una Commodore Amiga 500, máquina con la conocí qué era un sistema operativo. La primera vez que usé el diskette que lo levantaba me quedé maravillado, cuando descubrí que podía jugar con un sintetizador de voz con el que podía simular una computadora que hablara por si misma algo similar ocurrió. Pero no, no conocí el software privativo con la Amiga, existía en ese momento el AmigaBasic y yo ni noticia.</p>

        <p>Hoy en día podría ser uno de los mejores programadores del mundo si hubiese conocido el software libre o el privativo en conjunto con las CR Tronic 360 de Typographics. En realidad, me equivoqué más arriba al decir que era la empresa de mi padre. Era la empresa de muchos hombres, muchos empleados. Los conocía a todos, pues yo iba a la empresa a verlo a él. Con algunos de ellos tenía más simpatía que otros, a los dos que más recuerdo son a Mítolo, "el pitufo"; a Umberto; a Eduardo Barone; a Sergio, "la gallina". Ellos hacían la empresa, más allá de sus fundadores y dueños.</p>
    </section>
    <section class="bilbo">

        <p>No recuerdo haber nunca haber interactuado con las máquinas, sólo recuerdo verlas en una oficina, eran inmensas. En la casa de mi madre tenía robots, o por lo menos uno. No conocía aún la relación entre ellos y las CR Tronic 360. Nadie me hablaba de software.</p>

        <p>Entonces, tratando de ir un poco al grano, qué es lo libre y singular. Es algo que pensé en oposición a la singularidad. Vendría a ser la singularidad libre. Con esto entiendo un tipo de tecnología, que podría ser interpretada como inteligencia artificial, si es que tal cosa existe, construida con software libre. Para mí todo empieza con un debate, y si muchos hablan acerca del peligro de la singularidad y la inteligencia artificial es siempre mejor empezar con esta instancia.</p>
    </section>
    <section class="bilbo">
        <p>Hace mucho años registré por primera vez el dominio Free-Singularity.org, empezó siendo un debate y un juego. Creé una cadena pequeña de páginas web conectadas con hipervínculos binarios. ¿Qué quiere decir esto? Mejor ver el ejemplo, me cuesta encontrar las palabras. Esa cadena llegaba a una canción sobre el número pi en un sitio web de video streaming. Ahora sé un poco más de diseño web y puedo apostar a captar tráfico, hacer crecer en serio este lugar.</p>

        <p>La cuestión es que mientras sigue mi debate, ya surgió lo que algunos consideran inteligencia artificial. Me estoy quedando en el tiempo. Por el momento mi apuesta es no usarla, estudiarla, pero sin tocarla, escuchar lo que dicen mis amigos, mis compañeros en la facultad, los profesores, mi familia y ese etcétera mimado por Umberto Eco.</p>
    </section>
    </div>
    <section id="frodo">
        <nav class="links">
            <a href="https://free-singularity.org/typographics.html"><button id="penguin">Typograhics</button></a>
            <a href="https://free-singularity.org/CR_Tronic_360.html"><button id="penguin">CR Tronic 360</button></a>
            <a href="https://free-singularity.org/Amiga500.html"><button id="penguin">Commodore Amiga 500</button></a>
        </nav>
    </section>
</body>
</html>
    
   body{
    background-color: rgb(238, 206, 236);
}
h1{
    text-align: center;
    background-color: rgb(250, 159, 250);
    color: purple;
    border-style: solid;
}

div{
    display: inline-block;
    float: center;
    margin-left: 20px;
    margin-right: 20px;
    resize: none;
    overflow: auto;
}
.bilbo{
    background-color: rgb(238, 206, 236);
    color: black;
    padding: 10px;
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-radius: ;
    border-color: green;
    width: 28%;
    height: 425px;
    display: inline-block;
    float:left;
    overflow: scroll;
    margin: 1%;

}

#frodo{
    margin-left: 29%;
    margin-bottom: 50px;
}


button{
        vertical-align: top;
        height: 70px;
        width: 150px;
        background-color: #AAAAAA;
        border: .5px solid crimson;
        border-radius: 10px;
        padding: 20px;
        margin: 10px;
        text-decoration: none;
      }

#penguin {
    color: white;
    border-radius: 25%;
    transition-property: border-radius,border,color,background-color;
    transition-duration: .1s;
    transition-timing-function: .1s;
    transition-delay: .3s;
    margin: 10px;
}

#penguin:hover {
    border-color: orange;
    color: white;
    background-color: black;
}

我更改了代码,对此感到抱歉,但我需要它。 现在我已经发布了网站的完整代码。希望你能在这方面帮助我。

css
1个回答
0
投票

给你。

body
(或
section
元素的父元素,无论是什么)上的 Flexbox 可以做到这一点。

只需确保

section
元素具有
flex: 0 0 auto
;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
}

section {
  margin-left: 20px;
  margin-right: 20px;
  overflow: auto;
  flex: 0 0 auto;
}

.bilbo {
  background-color: rgb(238, 206, 236);
  color: black;
  padding: 10px;
  border-style: solid;
  border-width: 0px 5px 0px 5px;
  border-color: green;
  width: 150px;
  height: 425px;
  overflow: scroll;
  margin: 1em;
}
<section class="bilbo">
  <p>Hace muchos años me topé con algo realmente novedoso para mí, algo que podría haber conocido cuando sólo tenía 6 años y que a esa edad hubiera podido sacarle un enorme provecho gracias a las CR Tronic 360 de la empresa de mi padre, Typographics. Este
    algo con el que me crucé fue el Software Libre. Me resultó algo maravilloso, era mi primer contacto con el Software. Esto es algo raro, nunca conocí en toda mi vida el software privativo. Durante muchísimos años tuve una Commodore Amiga 500, máquina
    con la conocí qué era un sistema operativo. La primera vez que usé el diskette que lo levantaba me quedé maravillado, cuando descubrí que podía jugar con un sintetizador de voz con el que podía simular una computadora que hablara por si misma algo
    similar ocurrió. Pero no, no conocí el software privativo con la Amiga, existía en ese momento el AmigaBasic y yo ni noticia.</p>

  <p>Hoy en día podría ser uno de los mejores programadores del mundo si hubiese conocido el software libre o el privativo en conjunto con las CR Tronic 360 de Typographics. En realidad, me equivoqué más arriba al decir que era la empresa de mi padre. Era
    la empresa de muchos hombres, muchos empleados. Los conocía a todos, pues yo iba a la empresa a verlo a él. Con algunos de ellos tenía más simpatía que otros, a los dos que más recuerdo son a Mítolo, "el pitufo"; a Umberto; a Eduardo Barone; a Sergio,
    "la gallina". Ellos hacían la empresa, más allá de sus fundadores y dueños.</p>
</section>
<section class="bilbo">

  <p>No recuerdo haber nunca haber interactuado con las máquinas, sólo recuerdo verlas en una oficina, eran inmensas. En la casa de mi madre tenía robots, o por lo menos uno. No conocía aún la relación entre ellos y las CR Tronic 360. Nadie me hablaba de
    software.</p>

  <p>Entonces, tratando de ir un poco al grano, qué es lo libre y singular. Es algo que pensé en oposición a la singularidad. Vendría a ser la singularidad libre. Con esto entiendo un tipo de tecnología, que podría ser interpretada como inteligencia artificial,
    si es que tal cosa existe, construida con software libre. Para mí todo empieza con un debate, y si muchos hablan acerca del peligro de la singularidad y la inteligencia artificial es siempre mejor empezar con esta instancia.</p>
</section>
<section class="bilbo">
  <p>Hace mucho años registré por primera vez el dominio Free-Singularity.org, empezó siendo un debate y un juego. Creé una cadena pequeña de páginas web conectadas con hipervínculos binarios. ¿Qué quiere decir esto? Mejor ver el ejemplo, me cuesta encontrar
    las palabras. Esa cadena llegaba a una canción sobre el número pi en un sitio web de video streaming. Ahora sé un poco más de diseño web y puedo apostar a captar tráfico, hacer crecer en serio este lugar.</p>

  <p>La cuestión es que mientras sigue mi debate, ya surgió lo que algunos consideran inteligencia artificial. Me estoy quedando en el tiempo. Por el momento mi apuesta es no usarla, estudiarla, pero sin tocarla, escuchar lo que dicen mis amigos, mis compañeros
    en la facultad, los profesores, mi familia y ese etcétera mimado por Umberto Eco.</p>
</section>
</div>

© www.soinside.com 2019 - 2024. All rights reserved.