如何让我的 div 随内容扩展？

Question

我正在尝试制作时间轴之类的东西，我有多个 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>

Fiddle

Answer 1

这里的答案很简单，只需在 .text 上将 height 更改为 auto。如果它永远在变化，你不需要指定它。下面的工作片段：

<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>

Answer 2

将高度更改为 'auto'。这是您唯一需要的东西。


.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;
}

Answer 3

您可以使用 Bootstrap 框架轻松完成全页打开此代码段并尝试调整浏览器大小，这在桌面和移动设备上都有效

.text {
  background-color: white;
  float: left;
  border-radius: 25px;
  border: 5px solid #D3D8E6;
  padding: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="text col-12 col-xl-8 my-auto">
      <h1>2004</h1>
      <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>
    <div class="col-12 col-xl-4">
      <img class="img" src="https://www.cranepartssupply.com/media/wysiwyg/WerkplaatsBuitenzicht_Web.jpg" />
    </div>
  </div>
</div>

如何让我的 div 随内容扩展？

How do I get my div to scale with conent?

html

css

responsive