在Css中堆叠div
我正试图将“Direction”Div叠加在其他两个Div(Ratedpics和Mainpics)之上。我希望他们以彼此为中心。此外,当页面调整大小时,我希望它们与页面成比例移动。这可能吗 额定图片和主图片需要并排。方向需要在顶部居中在Css中堆叠div,css,html,alignment,Css,Html,Alignment,我正试图将“Direction”Div叠加在其他两个Div(Ratedpics和Mainpics)之上。我希望他们以彼此为中心。此外,当页面调整大小时,我希望它们与页面成比例移动。这可能吗 额定图片和主图片需要并排。方向需要在顶部居中 div#MainPics { height: 650px; width: 60%; -moz-border-radius: 35px; border-radius: 35px;
div#MainPics
{
height: 650px;
width: 60%;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
margin-left: auto;
margin-right: auto;
}
#ratedpic
{
position: relative;
float: left;
width: 22%;
}
div#Direction
{
width: 20%;
margin-left: auto;
margin-right: auto;
}
<div id="Direction">
<asp:Label ID="Label1" runat="server" Text="Here i want my directions centered on top of main pics" Font-Size="Large"
Width="270" Font-Bold="True" ForeColor="#1B0358"></asp:Label>
</div>
<div id="ratedpic">
<p>
<asp:Label ID="RatedPicnameLabel" runat="server" Text=""></asp:Label>
</p>
<asp:ImageButton ID="RatedImage" Width="70%" runat="server" /><br />
<asp:Label ID="RatedPicRating" runat="server" Text=""></asp:Label><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label>
</p>
<asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" />
</div>
<div id="LeftPic">
<p>
<asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" Font-Bold="True"></asp:Label>
</p>
<asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" />
</div>
</div>
div#MainPics
{
高度:650px;
宽度:60%;
-moz边界半径:35px;
边界半径:35px;
背景色:黑色;
左边距:自动;
右边距:自动;
}
#差饷基本法
{
位置:相对位置;
浮动:左;
宽度:22%;
}
分区方向
{
宽度:20%;
左边距:自动;
右边距:自动;
}
HTml输出
<div id="Direction">
<span id="MainContent_Label1" style="display:inline-block;color:#1B0358;font-size:Large;font-weight:bold;width:270px;">Chose the photo you like better.</span>
</div>
<div id="ratedpic">
<p>
<span id="MainContent_RatedPicnameLabel">Margaret</span>
</p>
<input type="image" name="ctl00$MainContent$RatedImage" id="MainContent_RatedImage" src="Pictures/6f455ca0-27a0-49c3-ab61-e3f19e2e8258.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$RatedImage", "", false, "", "Member.aspx?UserID=9", false, false))" style="width:70%;" /><br />
<span id="MainContent_RatedPicRating">Banged: 52%</span><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<span id="MainContent_FirstPicMemberNameLabel" style="color:White;font-weight:bold;">Jessica-Jean</span>
</p>
<input type="image" name="ctl00$MainContent$FirstPicLink" id="MainContent_FirstPicLink" src="Pictures/2b5c7b66-00c4-4948-aa2b-7abef2f556f3.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$FirstPicLink", "", false, "", "default.aspx?yesId=7&noId=7", false, false))" style="width:90%;" />
</div>
<div id="LeftPic">
<p>
<span id="MainContent_SecondPicMemberNameLabel" style="color:White;font-weight:bold;">Amy</span>
</p>
<input type="image" name="ctl00$MainContent$SecondPicLink" id="MainContent_SecondPicLink" src="Pictures/ce698138-1dfc-46f8-aab7-fd7a1d5c5f0b.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$SecondPicLink", "", false, "", "default.aspx?yesId=12&noId=7", false, false))" style="width:90%;" />
</div>
</div>
选择你更喜欢的照片。
玛格丽特
爆炸:52%
杰西卡·琼
艾米
如果我正确理解了您的问题,您需要在ratedpic和mainpic周围添加一个额外的包装:
我还强烈建议将您的CSS ID设置为全小写,以防止打字错误。您应该共享HTML标记供我们大多数人测试,而不是ASP脚本。尽管如此,我在CSS定义的任何地方都看不到规则
z-index
。我很感激你的建议。我需要更多地考虑标准。