これらのDivを互いにどのように配置するのですか？

Question

私はこれらの2つのdivを互いに隣り合わせに置くのが難しいです。 CSSを使わずに.htmlファイルでこれらを解決できますか？

<div> 
 
    <div style="float: left"> \t 
 
    <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>

私はいくつかのより多くのテキストを追加する必要があるので2つのdivは幅の50％でなければなりません。おかげ

Answer 1

あなたはあなたの実際のコードを修正するために、そのコンテナにwrapperではなく内部のフロートを追加する必要があります。また、オーバーフローの問題を回避するために、親コンテナにoverflow:autoを追加します。https：// gyazo

<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>