gpt4 book ai didi

html - css改变内联子div的宽度

转载 作者:太空宇宙 更新时间:2023-11-04 12:50:08 25 4
gpt4 key购买 nike

大家好,我正在构建一个元素,其中每个子 div 都单独具有容器的全宽,内联显示,很像内联导航菜单。每个单独的子元素都有一个包含父元素完整范围的宽度,但是一次只显示一个元素。我已经完成了这个,但是以一种非常低效的方式完成了它,我使用了一个空白的 html 字符来实现这个效果。

    Here is the code I have used:


<!DOCTYPE html>
<html>
<head>

<style type="text/css">

.parent > div{
display: inline;
}

/*all child divs are displayed inline */

.parent{
width:20%;
position: relative;
overflow:hidden;
border:solid;
}
/* The parent container is going to be part of a dynamic jquery carousel so I have given the width a percentage
*/
/*width does not apply to inline elements*/

.children{
position: absolute;
width: 100%;
}

/*class to specify attributes shared by all the child divs of the parent container*/

.child-1{
background-color: #8A2BE2;
}

/*First child div*/

.child-2{
left:100%;
background-color: #FF7F50;
}

/*second child div*/

</style>

</head>

<body>

<div class="main-parent">
<div class="parent">
<div class="children child-1">
First child
</div>

<div class="children child-2">
Second child
</div>
&nbsp;
</div>

</div>
</body>
</html>

最佳答案

菜单项不一定需要保持“一致”,因为无论如何您都是一次显示它们。

如果你遵循这样的方法,这是最简单的——所有的导航项都是 block 状全宽元素,你将包装器的高度设置为等于单个导航项,并通过 javascript 你玩垂直定位这样您想要的那个进入 View (而不是玩绝对定位元素的左变量)。

我认为,如果您很难解释一个概念,那么用户使用您的解决方案可能会更加困难,所以也许去绘图板看看可能缺少哪些细节对您有好处.

关于html - css改变内联子div的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26195685/

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