0

Написал такой код. Планируется что слева в каждом блоке будет картинка, а справа будет сверху название, снизу описание. Но проблема в том что блок с текстом из-за длины занимает все 100% блока и переносится на следующую строку.

Как сделать что бы текст не переносило на следующую строку, при этом сохранив гибкость, то есть не задавая ширину блоков, она может постоянно меняться позже?

JSFiddle: https://jsfiddle.net/6arnozcs/

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.shop_block {
	max-height: 300px;
	overflow: auto;
    width: 400px;
}
.shop_item {
    background: #ccc;
}
.shop_item:hover {
	background: #999;
}
.shop_item>div {
	float: left;
}
.shopitem_cont {
	height: 64px;
    overflow: hidden;
	box-sizing: border-box;
	padding: 5px 10px 3px 8px;
}
.shopitem_head {
	font-size: 18px;
	padding: 0 0 3px 0;
	margin: 0 0 3px 0;
	border-bottom: 1px solid #000;
}
<div class="shop_block">
		<div class="shop_item clearfix">
			<div class="shopitem_image">
				<img src="http://placehold.it/64x64">
			</div>
			<div class="shopitem_cont">
				<div class="shopitem_head">Item 0</div>
				Description is here. На самом деле описание настоооолько большое что просто  не влазит в этот блок. 
			</div>
		</div>
		<div class="shop_item clearfix">
			<div class="shopitem_image">
				<img src="http://placehold.it/64x64">
			</div>
			<div class="shopitem_cont">
				<div class="shopitem_head">Item 0</div>
				Description is here. На самом деле описание настоооолько большое что просто не влазит в этот блок. 
			</div>
		</div>
	</div>

1 ответ 1

1

Есть прекрасная связка float: left / right; + overflow: hidden. Выглядит эта техника вот так:

.container {
  border: 1px solid #000;
  padding: 10px;
  margin: 0 0 10px;
}
.container:after {
  display: table;
  content: '';
  clear: both;
}
.container__left {
  float: left;
  margin: 0 10px 0 0;
}
.container__right {
  overflow: hidden;
  padding: 10px;
  border: 1px solid #ccc;
}
.container__right p {
  margin: 0;
}
<div class="container">
  <div class="container__left">
    <img src="http://placehold.it/64x64" />
  </div>
  <div class="container__right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At harum eaque sint.</p>
  </div>
</div>

<div class="container">
  <div class="container__left">
    <img src="http://placehold.it/128x64" />
  </div>
  <div class="container__right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At harum eaque sint. Quas sint quia repellat, qui blanditiis odit harum delectus cum illum.</p>
  </div>
</div>

Ну а вообще — пользуйтесь флексбоксом, если позволяет стек браузеров : )

1
  • Я пока не имел дела с flexbox, но все факты говорят что пора бы. Большущее спасибо!
    – Telion
    Commented 1 дек. 2016 в 14:59

Ваш ответ

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

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