gpt4 book ai didi

css - 将 3 个 div 对齐到父级的左侧,并有一些重叠

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

我从下面的代码中得到了这种结构。尽管我努力和阅读,但我无法做到以下几点。
在纯 CSS 中,我如何强制 X 粘贴容器的右边界,在 Y2/Y1 div 下?

容器和C没有固定宽度(为了方便我在代码里放了固定宽度)。所有其他的都有固定的宽度。

enter image description here

.我

<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}

DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}

DIV.BlocA {
width:20px;
background-color:#AAAAAA;

float:left;
}

DIV.BlocB {
width:20px;
background-color:#999999;

float:left;
}

DIV.BlocC {
width:20px;
background-color:#666666;

float:left;
}

DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;

float:right;

-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}

DIV.BlocY1, DIV.BlocY2 {
width:20px;

float:right;
}
</style>
</HEAD>

<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>

</BODY>
</HTML>

最佳答案

我不确定这是否是您想要的结果。

CHECK DEMO

我在您想要左侧的元素上使用了 clear:both;float:left;。我还包裹了“Y”div,以便我可以将它们并排 float 。

关于css - 将 3 个 div 对齐到父级的左侧,并有一些重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20364688/

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