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

bvhaajcl  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(94)

bounty将在6天后过期。回答此问题可获得+50声望奖励。Feuergeist希望引起更多关注此问题:我希望您能帮助我,我正在网上学习一些课程,有时候会很难。

我有三个段落元素。三个分为三个部分。我不希望它们中的任何一个改变大小或位置。但我不能做到这一点。也许用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;
}

字符串
我已经改变了代码,对不起,但我需要它。现在我已经张贴网站的完整代码。希望你能帮助我在这方面。
在这里你可以在线观看问题click here

5tmbdcev

5tmbdcev1#

body上的Flexbox(或者section元素的父元素)可以做到这一点。
只需确保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;
}

个字符

相关问题