Text accompany the movement of the div

Asked

Viewed 40 times

-2

Guys how can I make a div push the others to the side when the size of it increases my code is this

<div>preço do produto</div>
<div>outro texto</div>
<div>outro texto</div>

In other words, these Divs are on the same line, I want to know how one can push the other to the side when its size increases

css

  • You can use media queries.

  • If you are using bootstrap, just use the grid system, which consists of rows and columns. https://getbootstrap.com/docs/4.0/layout/grid/

  • Guy if your question is about CSS at least should have the CSS code you tried there, or at least a minimal model that to simulate your situation

2 answers

1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Div Float</title>
    <style>
      div {
        border: 1px solid #ccc;
        position: relative;
        float: left;
        padding: 10px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div>preço do produto</div>
    <div>outro texto</div>
    <div>outross ssssss sssssssss texto</div>
    <div>preço do produto</div>
    <div>outro texto</div>
    <div>outross ssssss sssssssss texto</div>
  </body>
</html>

That way the div stays floating in the body. I believe this will help you.

0

If you are not using any Framework (such as Bootstrap or Materialize), create the class below and see what results!

.resize-content {
    min-height: 30px; /* ajuste conforme seu gosto */
    min-width: 30px; /* ajuste conforme seu gosto */
    resize: both;
    overflow: auto;
    max-height: fit-content;
    max-width: fit-content;
}

but, you can also use the jQuery which is a JS Framework, with it you can ta using the function resizable(), in this way:

$(elemento).resizable();

the elemento needs to be the div you want to resize according to the content. I hope it helped you!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.