Question

我在将这两个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％。感谢

Answer 1

您需要在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>

Answer 2

使用display:flex属性

<div style="display:flex">
<div style="">   
<div class="wrapper" style="">
  <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="">
<div class="wrapper" style="">
  <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>

Answer 3

  <div>
    <div style="float: left;width: 50%;">   
    <div class="wrapper" style="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;width: 50%;">
    <div class="wrapper" style="">
   <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放在一起？

3 个答案: