Hello. I'm trying to impose such a block enter image description here

I do this:

.case_op { background-color: #fff; width: 1275px; } .imgcaop { display: inline-block; } .imgcaop img { width: 320px; vertical-align: top; } .op1 { display: inline-block; margin-top: 8px; width: 850px; background-color: #eee; } .op_title { display: inline-block; width: 200px; margin-left: 25px; font-weight: bold; } .op_opis { display: inline-block; width: 70%; float: right; } 
 <div class="case_op"> <div class="imgcaop"> <img src="http://roypchel.ru/wp-content/uploads/2015/02/bashkirsakaya-pchela.jpg" alt="" /> </div> <div class="op1"> <div class="op_title">Carnica</div> <div class="op_opis"> more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info </div> </div> <div class="op1"> <div class="op_title">Carnica</div> <div class="op_opis"> more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info </div> </div> <div class="op1"> <div class="op_title">Carnica</div> <div class="op_opis"> more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info </div> </div> </div>

Tell me what am I doing wrong? I would be grateful for the help.

    1 answer 1

    forgot about wrapping ... float

     .case_op { background-color: #fff; width: 1200px; position:relative; border:10px solid #e2bf11; overflow: hidden; height:200px; } .imgcaop { float:left; word-wrap: break-word; } img{ height: 217px; } .imgcaop{ width: 320px; vertical-align: top; } .op1 { display: inline-block; width: 750px; background-color: #eee; } .op_title { display: inline-block; width: 200px; margin-left: 25px; font-weight: bold; } .op_opis { display: inline-block; width: 70%; float: right; } 
     <div class="case_op"> <div class="imgcaop"> <img src="http://roypchel.ru/wp-content/uploads/2015/02/bashkirsakaya-pchela.jpg" alt="" /> </div> <div class="text"> <div class="op1"> <div class="op_title">Carnica</div> <div class="op_opis"> more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info </div> </div> <div class="op1"> <div class="op_title">Carnica</div> <div class="op_opis"> more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info </div> </div> <div class="op1"> <div class="op_title">Carnica</div> <div class="op_opis"> more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info more info </div> </div> </div> </div>

    • almost what you need. but why under the image appears empty white space? How to press the picture exactly along the edges? - iKey
    • @ Denis changed ... - C.Raf.T