0

Здравствуйте. Пытаюсь верстать такой блок введите сюда описание изображения

Делаю так:

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

Скажите, что я делаю не так? Буду благодарен за помощь.

1 ответ 1

1

забыли про обтекание... 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>

2
  • почти то что нужно. но почему под изображением появляется пустое белое пространство? как прижать картинку ровно по краям?
    – iKey
    Commented 30 июл. 2016 в 8:44
  • @Денис изменил...
    – C.Raf.T
    Commented 30 июл. 2016 в 9:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.