试图将我的图像对齐。 Div分手了

Question

当我添加.article img {float：right;图像离开div文章，我没有得到我想要的预期结果。我想在灰色框内和右边对齐图像。 这就是我所取得的成就。

我得到的是图像在主容器外对齐。

 {
    margin: 0;
    padding: 0;
}

body{

    width: 960px;
    margin: 0 auto;
}

html {
    background: url(bgimage.jpg) no-repeat center center fixed;
    -webkit-background-size:cover;
    background-size: cover;
}

.content-container{
    background: rgba(255,255,255,.48);
    margin-top: 50px;
    border: 2px #e5e5e5 solid;
    border-radius: 7px ;
    box-shadow: 2px 2px 6px black;
}

.main-container{
    margin: 10px;
    padding: 5px;
}

.articles{
    background: rgba(182,182,168,0.7);
    border: 2px solid black;
    border-radius: 5px;
}

.articles h3{
    padding-left: 15px;
    padding-top: 1px;
    margin-bottom: 2px;
}

.articles p{
    margin-top: 1px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    width: 920px;
}

.articles img{
    float: right;
}

<div class="content-container"> 
	<div class="main-container">
		<div class="articles">
			<h3>Heading of the article</h3>
			<br/>
			<p>"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."</p>
			<img src="http://placekitten.com/g/300/300"></img>
		</div>
	</div>
</div>

Answer 1

这可以通过在最后添加一个清晰的元素来轻松解决：

<div class="clear"></div>

css：

.clear {
    clear: both;
}

示例：

＆＃13;

＆＃13;

.clear {
    clear: both;
}


body{

    width: 960px;
    margin: 0 auto;
}

html {
    background: url(bgimage.jpg) no-repeat center center fixed;
    -webkit-background-size:cover;
    background-size: cover;
}

.content-container{
    background: rgba(255,255,255,.48);
    margin-top: 50px;
    border: 2px #e5e5e5 solid;
    border-radius: 7px ;
    box-shadow: 2px 2px 6px black;
}

.main-container{
    margin: 10px;
    padding: 5px;
}

.articles{
    background: rgba(182,182,168,0.7);
    border: 2px solid black;
    border-radius: 5px;
}

.articles h3{
    padding-left: 15px;
    padding-top: 1px;
    margin-bottom: 2px;
}

.articles p{
    margin-top: 1px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    width: 920px;
}

.articles img{
    float: right;
}

＆＃13;

<div class="content-container">
  <div class="main-container">
    <div class="articles">
      <h3>Heading of the article</h3>
      <br/>
      <p>"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."</p>
      <img src="http://placekitten.com/g/300/300">
      <div class="clear"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;