Сделайте родительскую высоту подходящей для высоты содержимого (CSS) - PullRequest
Новая
       0

Сделайте родительскую высоту подходящей для высоты содержимого (CSS)

0 голосов
/ 25 мая 2020

Может ли кто-нибудь помочь мне понять, как сделать высоту (красная рамка) подходящей для содержимого (зеленая рамка)?

enter image description here

I у меня возникли проблемы с пониманием того, какое свойство использовать, я пытаюсь получить этот результат, но мне это не удалось

enter image description here

div.items {
  position: fixed;
  top: 7.4cm;
  left: 1cm;
  width: 19.6cm;
  height: 4.5cm;
  border: 1px solid black;
}

div.item {
  border: 1px solid red;
  height: 19px;
}

div.cantidades {
  position: absolute;
  left: 0.1cm;
  width: 1.6cm;
}

div.descripcion {
  position: absolute;
  left: 1.9cm;
  width: 10.5cm;
}

div.precioUnitario {
  position: absolute;
  left: 12.4cm;
  width: 1.5cm;
}

div.ventas {
  position: absolute;
  left: 17.4cm;
  width: 2.2cm;
}

div.green {
  border: 1px solid green;
}
<div class="items">
  <div class="item">
    <div class="cantidades">2</div>
    <div class="descripcion">TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC</div>
    <div class="precioUnitario">$1.60</div>
    <div class="ventas">$60</div>
  </div>
  <div class="item">
    <div class="cantidades">2</div>
    <div class="descripcion">TM. MAIZ blanco</div>
    <div class="precioUnitario">$1.90</div>
    <div class="ventas">$6</div>
  </div>
</div>

1 Ответ

3 голосов
/ 25 мая 2020

Если вы ищете адаптивный макет, всегда используйте flex, я также удалил few ненужный код из вашего, потому что это contradicting ваше требование. 

div.items {
  top: 3.4cm;
  left: 1cm;
  width: 19.6cm;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

div.item {
  border: 0px solid red;
  display: flex;
  border: 1px solid blue;
}

div.cantidades {
  left: 0.1cm;
  width: 1.6cm;
  border: 1px solid green;
}

div.descripcion {
  left: 1.9cm;
  width: 10.5cm;
  border: 1px solid green;
}

div.precioUnitario {
  left: 12.4cm;
  width: 1.5cm;
  border: 1px solid green;
}

div.ventas {
  border: 1px solid green;
  left: 17.4cm;
  width: 2.4cm;
  position: absolute;
}
<html>

<head>
  <title>Print Test</title>
</head>

<body>
  <div class="items">
    <div class="item">
      <div class="cantidades">2</div>
      <div class="descripcion">TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC</div>
      <div class="precioUnitario">$1.60</div>
      <div class="ventas">$60</div>
    </div>

    <div class="item">
      <div class="cantidades">2</div>
      <div class="descripcion">TM. MAIZ blanco</div>
      <div class="precioUnitario">$1.90</div>
      <div class="ventas">$6</div>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...