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

示例：

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

试图将我的图像右对齐。 Div 脱离

Trying to align my image to right. Div breaks away

html

image

alignment