gpt4 book ai didi

html - 尽管计算了宽度,滑动的容器仍会移动

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

我最近的一个元素包括使用两个相邻的容器。按下按钮时,我希望内容容器(基本上是一个假体)减小其宽度,并且菜单容器能够移入。

我似乎主要让它工作,尽管如果没有一些 JS tom-foolery(这确实使美学无效),过渡就不可能无缝。在最右侧(菜单大部分时间所在的区域),菜单向下移动,但没有边距。

The menu container moving down.

这对我来说毫无意义,添加任何翻译或减少任一容器的宽度似乎都可以解决这个问题。我错过了什么吗?

HTML

<body>
<main>
<p>Container.</p>
</main>
<aside>
<p>Menu.</p>
</aside>
</body>

CSS

body {
padding: 0;
margin: 0;
}
main {
float: left;
border: 1px solid black;
transform: translate(0px, 0px);
width: 100%;
}
aside {
float: right;
border: 1px solid red;
transform: translate(450px, 0px);
width: 450px;
}

最佳答案

很明显。 Main 和 aside 在不同的两行。

我做了一个代码变体;p。

HTML:

<body>
<section>
<main>
<p>Container.</p>
</main>
<aside>
<p>Menu.</p>
</aside>
</section>

CSS:

body {
padding: 0;
margin: 0;
}
main {
float: left;
border: 1px solid black;
transform: translate(0px, 0px);
width: calc(100% - 454px);
display: inline-block;
}
aside {
float: left;
display: inline-block;
border: 1px solid red;
width: 450px;
}
section {
display: inline-block;
width: calc(100% + 450px);
float: left;
}

我希望这会有所帮助。

关于html - 尽管计算了宽度,滑动的容器仍会移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39343846/

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