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

最好使用float：left为图像。

旁注：要解决这些问题，请学习在网页设计中非常有用的bootstrap

Answer 2

向左拉图像，向右拉文字像这个例子：

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

Answer 3

您需要添加：

img{ display: block; float: left; }

这将浮动左侧的图像，段落中的文字将环绕它们。

Answer 4

请尝试使用此代码并在代码段中进行测试。它也是响应式手机

＆＃13;

artist GET        /artists/:full_name(.:format)                                           artists#show {:full_name=>/[\w]+/}

＆＃13;

@media screen and (min-width:540px) {
  .div_left,
  .div_right {
    max-width: 50%;
    width: 100%;
    float: left;
  }
}

img {
  width: 100%;
}

.div_right p {
  padding: 5px;
}

＆＃13;

Answer 5

为此使用flex布局。

像：

.content {
    display: flex;
    min-height: 690px;   
}
.dog {
    height: 200px;
}

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

默认情况下flex-direction为row，如果您想垂直显示该项，则可以将其更改为column。

左侧图像，右侧文本

5 个答案: