<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
html - HTML 中的重叠 Div
我希望 Divs 相对于彼此工作。当我在 gridview 中添加行时，div 重叠。您可以在图像中看到问题。我不擅长 html/css。请帮助我。
这是 HTML:
<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">...</div>
<br />
</div>
<div class="right-side">
<div class="w_content">...</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="women_main">...</div>
</section>
CSS:
.right-side {
width:50%;
float:right;
margin-top:0px;
padding-top:0px;
}
.left-side{
width:50%;
float:left;
}
.women_main {
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}
最佳答案
你真的应该clear float秒。不给那么多<br />以获得正确的布局。解决方案是使用 clear: both在 .women_main 上.
初看:
.right-side {
width: 50%;
float: right;
margin-top: 0px;
padding-top: 0px;
}
.left-side {
width: 50%;
float: left;
}
.women_main {
clear: both;
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">...</div>
<br />
</div>
<div class="right-side">
<div class="w_content">...</div>
</div>
<div class="women_main">...</div>
</section>当右侧太长时:
.right-side {
width: 50%;
float: right;
margin-top: 0px;
padding-top: 0px;
height: 600px;
}
.left-side {
width: 50%;
float: left;
}
.women_main {
clear: both;
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">...</div>
<br />
</div>
<div class="right-side">
<div class="w_content">...</div>
</div>
<div class="women_main">...</div>
</section>您会发现两者都能正确适应高度。
关于html - HTML 中的重叠 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41442575/