在HTML中重叠Div

Question

我希望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;
}

Answer 1

你应该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>

你可以发现两者都能正确适应身高。

Answer 2

我已经解决了你的代码并附上了codepen链接。请检查，我希望这对你有帮助。

<强> HTML

<section id="section-1" class="content-current" onclick="setTabIndex(1)">
  <div class="left-side">
    <div class="women_main">... LEFT CONTENT ...</div> 
  </div>

  <div class="right-side">
    <div class="women_main">... RIGHT CONTENT ...</div> 
  </div>
</section>

<section class="two">
  <div class="">... SECTION2 ...</div>
</section>

<强> CSS

.content-current, .two {
  width: 100%;
  position: relative;
  border:1px solid #000;
  height:100px;
}
.left-side {
  width: 49%;
  float: left;
  border: 1px solid red;
}

.right-side {
  width: 49%;
  float: right;
  border: 1px solid blue;
}

.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;
}
.content-current:after {
  clear:both;
}
.two {
  margin-top: 10px;
  background: #ccc;
}

http://codepen.io/WebTechie/pen/EZxNwJ