试图将我的图像右对齐。 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

这可以通过在末尾添加一个 clear 元素来轻松解决：

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

CSS：

.clear {
    clear: both;
}

示例：

.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;
}

<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>