Wie platziert man diese Divs nebeneinander?

Question

Ich habe Schwierigkeiten, diese beiden Divs nebeneinander zu platzieren. Können Sie diese in der HTML-Datei lösen, also ohne CSS?

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

Da ich etwas mehr Text addieren: die beiden divs haben 50% der Breite sein. Dank

Answer 1

Sie müssen den Schwimmer im Innern der wrapper und nicht auf seinem Container um Ihren eigentlichen Code zu beheben. Fügen Sie auch overflow:auto zu übergeordneten Container Überlaufproblem zu vermeiden:

<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

Verwenden display:flex Attribut

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