主页 / 问题 / 597943
Accepted
Telion
Asked:2020-12-01 04:55:04 +0000 UTC2020-12-01 04:55:04 +0000 UTC

在前一个旁边放置一个浮动块

  • 772

我写了这段代码。计划在每个块的左侧有一张图片，右侧在顶部有一个名称，在底部有一个描述。但问题是带有文本的块，由于其长度，占据了块的所有 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>

html

1 个回答

  1. Best Answer

    有一群很棒的人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>

    好吧，一般来说——如果浏览器堆栈允许，请使用 flexbox :)

    • 1

相关问题