Question

我正在尝试使用float元素和一些文章的一些文字来实现简单的布局。左侧应该在浮动框中显示项目编号，右侧应该是项目说明。

我想根据描述中的文本量设置float元素的高度。如何实现？

HTML代码如下。

<div style="border: 1px solid #ccc; border-right: 0; 
display: -ms-flexbox;">

<div style="float: left; background-color: #f73738; color: yellow;
 font-size: 20px; min-width: 48px; text-align: center; padding: 40px 0; 
height : ?">1</div>

<h2 style="font-weight: normal; font-size: 20px; padding: 20px 0 
20px 12px; margin: 0; text-align: center;"> Some demo text to be entered
 here. The item should be described in detail.</h2>
</div>

我想要一些东西，以便可以根据文本量自动调整float的高度。所以基本上我在寻找身高的值。文本的数量将不断变化，高度也会随之变化。如何确保商品编号与商品说明的高度相同。

目前，我得到了类似的东西。

enter image description here

您能帮我更改CSS（样式元素），以便它可以随文本自动调整吗？预先感谢。

Answer 1

您的CSS不完整。您只为flexbox应用IE属性。将display: -ms-flexbox;更改为display: flex。这就是你想要的吗？

<div style="border: 1px solid #ccc; border-right: 0; display: flex">

  <div style="float: left; background-color: #f73738; color: yellow; font-size: 20px; min-width: 48px; text-align: center; padding: 40px 0;">1</div>

  <h2 style="font-weight: normal; font-size: 20px; padding: 20px 0 20px 12px; margin: 0; text-align: center;"> Some demo text to be entered here. The item should be described in detail.</h2>
</div>

如何根据文本框中的文本量自动调整一个元素的高度

1 个答案: