时间戳

首页 > 解决方案 > 如何让我的 div 随内容缩放？

html - 如何让我的 div 随内容缩放？

问题描述

我正在尝试制作类似时间线的东西，并且其中包含多个divs文本。

我希望它具有响应性，因此在台式机上它们又低又宽，但在移动设备上它们又细又长。但并不是每个div人都会有相同数量的文本，所以它们的高度不会相同。

如何获得divs内容的高度缩放。在width我得到它的百分比宽度，但我不明白它如何在高度上起作用。

我在编码方面也很新手，所以我很感激有一个 HTML/CSS 解决方案，所以没有 JS。但如果是比较简单的代码，我愿意试一试。

<style>
  .text {
    width: 70%;
    min-width: 400px;
    height: 250px;
    background-color: white;
    float: left;
    border-radius: 25px;
    border-style: solid;
    border-width: 5px;
    border-color: #D3D8E6;
  }

  .text p {
    padding-left: 25px;
    padding-right: 25px;
    color: #002B5C;
    padding-bottom: 25px;
    font-family: arial;
  }

  .text h1 {
    padding-left: 25px;
    margin-bottom: -25px;
    color: #002B5C;
    font-family: arial;
  }

  .container-tekst-links {
    width: 100%;
    height: 250px;
    max-height: 750px;
  }

  .img {
    float: left;
    margin-top: 60px;
    border-collapse: separate;
    border-radius: 0px 25px 25px 0px;
    background-color: blue;
    width: 190px;
    height: 130px;
  }
</style>

<div class="container">
  <div class="text">
    <h1>2004</h1><br />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  </div>
  <img class="img" src="https://www.cranepartssupply.com/media/wysiwyg/WerkplaatsBuitenzicht_Web.jpg" />
</div>

小提琴

标签： htmlcssresponsive

解决方案

这里的答案很简单，只需更改height为autoon .text。如果它永远在变化，则无需指定它。下面的工作片段：

<style>
  .text {
    width: 70%;
    min-width: 400px;
    height: auto;
    background-color: white;
    float: left;
    border-radius: 25px;
    border-style: solid;
    border-width: 5px;
    border-color: #D3D8E6;
  }

  .text p {
    padding-left: 25px;
    padding-right: 25px;
    color: #002B5C;
    padding-bottom: 25px;
    font-family: arial;
  }

  .text h1 {
    padding-left: 25px;
    margin-bottom: -25px;
    color: #002B5C;
    font-family: arial;
  }

  .container-tekst-links {
    width: 100%;
    height: 250px;
    max-height: 750px;
  }

  .img {
    float: left;
    margin-top: 60px;
    border-collapse: separate;
    border-radius: 0px 25px 25px 0px;
    background-color: blue;
    width: 190px;
    height: 130px;
  }
</style>

<div class="container">
  <div class="text">
    <h1>2004</h1><br />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  </div>
  <img class="img" src="https://www.cranepartssupply.com/media/wysiwyg/WerkplaatsBuitenzicht_Web.jpg" />
</div>

推荐阅读