让divs一起玩

Question

我想做什么：

img总是停留在左边，红色内容永远不会移动到图像的左侧

代码：

＆＃13;

＆＃13;

#content{
border: solid #d8d9da 1px;
display:inline-block;
float:left;
background-color:#ffffff;
border-radius: 4px;
margin:5%;
padding-bottom:20px;
}

.main_row{
background-color: PURPLE ;
height:auto;
min-height:50px;
margin: 10px 10px 0px 10px;
display:inline-block;
float:left;
}

.row_content{
background-color: RED ;
height:auto;
min-height:50px;
background-color:red;
word-wrap: break-word;
display:inline-block;
float:right;
}

.thumbnail{
background-color: GREEN ;
height:50px;
width:100px;
}

.row_extra{
font-size:10px;
}

＆＃13;

	<div id="content">

		<div class="main_row">

			<div class="thumbnail">IMG</div>
			<div class="row_content">
				Reflection makeReflection makeReflection makeReflection makeReflection makeReflection make Reflection makeReflection makeReflection make
				<div class="row_extra">extra stuffhere</div>
			</div>
		
		</div>
	
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已将display:table添加到父div，将table-cell添加到childs而不是inline-block。

现在IMG将始终保持不变，红色内容永远不会向左移动

.main_row{
background-color: PURPLE ;
height:auto;
min-height:50px;
margin: 10px 10px 0px 10px;
display:table;
float:left;
}

.row_content{
background-color: RED ;
height:auto;
min-height:50px;
background-color:red;
word-wrap: break-word;
float:right;
  display:table-cell;
}

.thumbnail{
background-color: GREEN ;
height:50px;
width:100px;
  display:table-cell;
}

http://jsbin.com/pimotisoxi/3/edit

Answer 2

有一种方法可以给猫皮肤，但你不应该同时使用内联块和浮动。浮动内联块会破坏在内联文本上下文中使用块的目的。如果要对齐内联块，则应在父容器上使用text-align:left。

这是一种方法（不使用内联块）。

＆＃13;

＆＃13;

#content{
border: solid #d8d9da 1px;
/* display:inline-block; */
/* float:left; */
/* Defaults to normal block taking up 100% width */
background-color:#ffffff;
border-radius: 4px;
margin:5%;
padding-bottom:20px;
}

.main_row{
background-color: PURPLE ;
height:auto;
min-height:50px;
margin: 10px 10px 0px 10px;
/* display:inline-block; */
float:left; 
}

.row_content{
background-color: RED ;
height:auto;
min-height:50px;
background-color:red;
word-wrap: break-word;
/* display:inline-block; */
/* float:right; */ 
/* Defaults to a normal block taking up 100% width */
margin-left: 100px; /* Add left-margin (visible below the thumbnail. */
}

.thumbnail{
background-color: GREEN ;
height:50px;
width:100px;
float:left;
}

.row_extra{
font-size:10px;
}

＆＃13;

	<div id="content">

		<div class="main_row">

			<div class="thumbnail">IMG</div>
			<div class="row_content">
				Reflection makeReflection makeReflection makeReflection makeReflection makeReflection make Reflection makeReflection makeReflection make
				<div class="row_extra">extra stuffhere</div>
			</div>
		
		</div>
	
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试这个浮动缩略图和＆amp; row_content类到左边。将以下代码添加到您的CSS底部

.thumbnail, .row_content {
      float: left;
}