如何将这些 Div 放在一起?

西蒙·库恩

我在将这两个 div 放在一起时遇到了一些困难。你能在 .html 文件中解决这些问题,所以没有 css 吗?

<div>
    <div style="float: left">	
    <div class="wrapper" style="width: 50%;float: left;">
      <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
        <article class="box center" style="float: right;"> 
          <!-- ################################################################################################ -->
          <div class="btmspace-30">
            <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
            <h2 class="heading font-x2">Urna erat sit amet lacus</h2>
            <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
          </div>
          <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
          <!-- ################################################################################################ -->
        </article>
      </div>
    </div>
    </div>
    <div style="float: left;">
    <div class="wrapper" style="width: 50%;">
      <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
        <article class="box center" style="float: right;"> 
          <!-- ################################################################################################ -->
          <div class="btmspace-30">
            <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
            <h2 class="heading font-x2">Urna erat sit amet lacus</h2>
            <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
          </div>
          <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
          <!-- ################################################################################################ -->
        </article>
      </div>
    </div>
    </div>
    </div>

由于我必须添加更多文本:两个 div 必须是宽度的 50%。谢谢

陪伴阿菲

您需要wrapper在容器而不是在其容器上添加浮动来修复您的实际代码。还要添加overflow:auto到父容器以避免溢出问题:

<div style="overflow:auto;border:1px solid;">  
<div class="wrapper" style="width: 50%;float: left;">
  <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
    <article class="box center" style="float: right;"> 
      <!-- ################################################################################################ -->
      <div class="btmspace-30">
        <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
        <h2 class="heading font-x2">Urna erat sit amet lacus</h2>
        <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
      </div>
      <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
      <!-- ################################################################################################ -->
    </article>
  </div>
</div>
<div class="wrapper" style="width: 50%;float: left;">
  <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
    <article class="box center" style="float: right;"> 
      <!-- ################################################################################################ -->
      <div class="btmspace-30">
        <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
        <h2 class="heading font-x2">Urna erat sit amet lacus</h2>
        <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
      </div>
      <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
      <!-- ################################################################################################ -->
    </article>
  </div>
</div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章