让div进入另一个

Question

我正在尝试将下面屏幕截图中以红色突出显示的内容转到绿线所在的位置，但是我无法让它工作。我试过清楚：两个;和清楚：左;两者都没有奏效。它们都位于屏幕截图中的位置：

这是我的框的代码和页面的一部分：

.contentcontainer{
	width:100%;
	background:#FFF;
    border-bottom: medium solid #d13f4a;
	margin-top:20px;
	height:110px;
}

.cctitle{
	margin-top:20px;
	margin-left:20px;
	font-family: 'Montserrat', sans-serif;
	font-size:15px;
	font-weight: 400;
	float: left;
}

.cctext{
	width: 535px;
	max-height: 35px;
	margin-left:20px;
	font-family: 'Montserrat', sans-serif;
	font-size:13px;
	font-weight: 400;
 	overflow:hidden;
	clear:left;
	float: left;
}

.ccthumb{
	float: left;
    background: #000;
    width: 195px;
    height: 110px;
}

<div class="contentcontainer">
<div class="ccthumb">
</div>
<div class="cctitle">Title Goes Here</div>
<div class="cctext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

</div>

Answer 1

尝试删除花车：

.cctitle, .cctext { float: none; }

问题在于clear: left中的.cctext。它缠绕着你所有的花车。从这看起来，看起来你可能不需要那么多。

Answer 2

将您的样式移至.cctext和.cctitle并放在那里（当然，留下字体大小等等 - 我尽可能简化代码）。

.cctitle, .cctext {margin: 0 0 0 210px;}

http://jsfiddle.net/qukpcq8f/2/

主要任务是删除float, clear and overflow。

Answer 3

你的div因为太宽而被推倒了。删除width：

.contentcontainer{
	width:100%;
	background:#FFF;
    border-bottom: medium solid #d13f4a;
	margin-top:20px;
	height:110px;
}

.cctitle{
	margin-top:20px;
	margin-left:20px;
	font-family: 'Montserrat', sans-serif;
	font-size:15px;
	font-weight: 400;
}

.cctext{
	max-height: 35px;
	margin-left:20px;
	font-family: 'Montserrat', sans-serif;
	font-size:13px;
	font-weight: 400;
 	overflow:hidden;
}

.ccthumb{
	float: left;
    background: #000;
    width: 195px;
    height: 110px;
}

<div class="contentcontainer">
<div class="ccthumb">
</div>
<div class="cctitle">Title Goes Here</div>
<div class="cctext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

</div>

Answer 4

您可以在标题和文字周围放置一个包装，并在其上使用float: left;

拨弄

http://jsfiddle.net/Hastig/4e9socmv/5/

确保拉伸视图窗格使其足够宽，以免由于宽度太窄而将内容div推到下方。

另一个小提琴，你只需浮动拇指

http://jsfiddle.net/Hastig/4e9socmv/4/