gpt4 book ai didi

html - 如何使用容器的文本大小制作子div?

转载 作者:行者123 更新时间:2023-11-28 03:30:32 24 4
gpt4 key购买 nike

我需要用容器的文本大小制作子 div。我的意思是增加文本和输入字段以填充所有容器。这是我的代码:

<body>
<div class="Container">
<div class="One">
<div class="Child">
<div class="MyText">text <input type="text"></div>
</div>
</div>
</div>
</body>

html,
body {
height: 100%;
margin: 0px;
font-size: 14px;
}

.Container
{
display: flex;
flex-direction: column;
border: 1px black dashed;
height: 100vh;
}

.One
{
display: flex;
border: 1px red dashed;
flex-basis: 100px;
}
.Child
{
heigth:100%;
}
.MyText input {heigth:100%;}

.MyText /* I want to make this content 100% of parents size */
{
font-size: 1vh;
}

https://jsfiddle.net/p6z6huvz/9/

最佳答案

如果我答对了你的问题,你会尝试实现这样的目标吗?

为此你需要使用 jQuery。

您可以在 CSS 中调整容器的宽度,jQuery 会计算 font-size


var fontwidth = $('.label').width();
var divwidth = $('.container').width();
var size = parseFloat($('.label').css('font-size'));
var fontsize = (divwidth / fontwidth) * size;

$('.label').css("font-size", fontsize);
*{
margin:0;
padding:0;
}
.label{
float:left;
line-height:.8;
float:left;
}
.container{
width:60%;
display:inline-block;
height:auto;
border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
<div class="label">Text</div>
</div>

关于html - 如何使用容器的文本大小制作子div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44756062/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com