gpt4 book ai didi

css - 如何使响应式 div 仅在一个水平方向上调整大小?

转载 作者:行者123 更新时间:2023-11-28 05:22:23 24 4
gpt4 key购买 nike

我想使用 Javascript 在 div 中添加越来越多的文本。

当我更改 html 中 div 内的文本时,它是响应式的,但它通过增加两个方向的宽度而不是仅将文本推到左侧来响应,这是所需的行为。

我考虑过使用 float,但由于此 div 的左侧或右侧没有元素,我不确定在这种情况下它是否有意义。

这是我的代码笔的链接:http://codepen.io/sentedelviento/pen/bZzPrO?editors=1100

html:

<body>
<div id='parent'>
<div id='test'>Will remain centered no matter</div>
</div>
</body>

CSS:

#parent {
width: auto; height: 10%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 2px solid blue;
}

#test {
width: auto; height: auto;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
position: relative;
border: 2px solid black;

}

最佳答案

检查这个: http://codepen.io/anon/pen/bZzXPw?editors=1100

#test {
max-width: 80%; height: 80%;
margin-top: 1%;
float: right;
border: 2px solid black;
margin-right: 10%;
}

您也可以使用绝对位置,但必须记住右对齐:

#test {
max-width: 80%; height: 80%;
margin-top: 1%;

border: 2px solid black;
margin-right: 10%;
position:absolute;
right: 0%;
}

关于css - 如何使响应式 div 仅在一个水平方向上调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38964530/

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