Textfeld neben einem Bild

Question

ich eine Orange Box neben dem Bild haben wollen, wie folgt aus:

Ich weiß, wie das Bild und die Box an, aber ich weiß nicht verstehe, wie ich sie nebeneinander bekommen kann. Im Folgenden finden Sie meine HTML und CSS.

.wrapper { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
} 
 

 
.content { 
 
    height: 1000px; 
 
    width: 1000px; 
 
} 
 

 
.image { 
 
    float: left; 
 
} 
 

 
.box { 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <div class="contents"> 
 
    <div> 
 
     <p>Actualmente se encuentra en:</p> 
 
     <p> 
 
     <a href="index.html">Lion</a> 
 
     <p> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="image"> 
 
     <img src="http://7art-screensavers.com/screenshots/animals/lying-lion.jpg" alt="Lion"> 
 
     </div> 
 
     <div class="box"> 
 
     <h2>León de Áfric</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p> 
 
     <p> 
 
      <a href="elephant.html">Siguiente »</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

I verwendet FlexBox die Kisten auszurichten, wie der Schwimmer gewünschte und entfernt.

.wrapper{ 
 
\t width:1000px; 
 
\t margin:0 auto; 
 
} 
 

 
.content{ 
 
\t height:1000px; 
 
\t width:1000px; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
}

<div class="wrapper"> 
 
    <div class="contents"> 
 
    <div> 
 
     <p>Actualmente se encuentra en:</p> 
 
     <p> 
 
     <a href="index.html">Lion</a> 
 
     <p> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/200" alt="Lion"> 
 
     </div> 
 
     <div class="box"> 
 
     <h2>León de Áfric</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p> 
 
     <p> 
 
      <a href="elephant.html">Siguiente »</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Try this:

.wrapper{ 
 
    width:1000px; 
 
    margin:0 auto; 
 
} 
 

 
.content{ 
 
    height:1000px; 
 
    width:1000px; 
 
} 
 

 
.image{ 
 
    float:left; 
 
    width:60%; 
 
} 
 
.image img{ 
 
    max-width:100%; 
 
} 
 
.box{ 
 
    float:right; 
 
    width:40%; 
 
}

<div class="wrapper"> 
 
    <div class="contents"> 
 
    <div> 
 
     <p>Actualmente se encuentra en:</p> 
 
     <p> 
 
     <a href="index.html">Lion</a> 
 
     <p> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="image"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/71/9a/a0/719aa07e7ccc325fd05b933eea027dec.jpg" alt="Lion"> 
 
     </div> 
 
     <div class="box"> 
 
     <h2>León de Áfric</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p> 
 
     <p> 
 
      <a href="elephant.html">Siguiente »</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Sie flex verwenden können, um es

.wrapper { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    justify-content:flex-start; 
 
} 
 

 
.image { 
 
    flex: 8 0 0; 
 
} 
 

 
.box { 
 
    flex: 2 0 0; 
 
    background: orange; 
 
    padding:0 10px; 
 
}

<div class="wrapper"> 
 
    <div class="contents"> 
 
    <div> 
 
     <p>Actualmente se encuentra en:</p> 
 
     <p> 
 
     <a href="index.html">Lion</a> 
 
     <p> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="image"> 
 
     <img src="http://7art-screensavers.com/screenshots/animals/lying-lion.jpg" alt="Lion"> 
 
     </div> 
 
     <div class="box"> 
 
     <h2>León de Áfric</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p> 
 
     <p> 
 
      <a href="elephant.html">Siguiente »</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>