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

所以我想创建一个网页，在那里会有图片在左边，文本在右边。我试着用边距和文本对齐，但这些似乎不起作用。这是我的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>

最佳答案

只需向左拉图像，向右拉文本。
比如这个例子：

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