html - 图片在左边，文字在右边

Question

所以我想创建一个网页，左边是图片，右边是文字。我尝试使用 margin 和 text-align，但这些东西似乎不起作用。这是我的 HTML。

.content {
  min-height: 690px;
  background: url("background.png");
  background-size: 100% 100%;
  overflow: scroll;
}

p {
  margin-left: 210px
}

.dog {
  height: 200px;
  border-radius: 8px;
  padding-left: 10px;
}

.cat {
  display: block;
  border-radius: 8px;
  height: 250px;
  width: 331px;
  padding-top: 10px;
  padding-left: 10px;
}

<div class="content">
  <h1>PETS</h1>
  <img class="dog" src="dog.jpg" alt="DOG">
  <img class="cat" src="cat.jpg" alt="CAT">
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
</div>

Answer 1

只需向左拉图片，向右拉文本即可。
像这个例子:

.content { 
background: white;
}


.containerImg{float:left;width:50%;}
.containerImg img{width:100%}
.containerText{float:right;width:50%;}

<div class="content">
  <h1>PETS</h1>
  <div class="containerImg">
    <img class="dog" src="http://fr.chatelaine.com/wp-content/uploads/2012/01/9fd9bf6740dc9e3db7cb7fd6e682.jpg" alt="DOG">
    <img class="cat" src="http://www.readersdigest.ca/wp-content/uploads/2011/01/4-ways-cheer-up-depressed-cat.jpg" alt="CAT">
  </div>
  <div class="containerText">
   <p>
    TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXTTEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
   </p>
  </div>
  
</div>