Question

如何将文字放在图像的右侧，如下所示：http://i.imgur.com/3hDi0mW.png。我试过清楚，漂浮......很多命令..但对我来说，它不起作用..

你可以帮帮我吗？谢谢：）这是我的代码：

#subcontent {
  margin: 0 auto;
  width: 70%;
  border-top: 1px solid #ececec;
  background-color: red;
}
.person {
  float: left;
  display: block;
  margin: 0 auto;
  width: 35%;
}
p {
  font-size: 12px;
  clear: right;
  float: left;
}
.group2 {
  overflow: hidden;
  margin: 0 auto;
}
.person2 {
  float: left;
  display: block;
  margin: 0 auto;
  width: 35%;
}
.textwrap {
  float: left;
  clear: left;
}

<div id="subcontent">
  <div class="group2">
    <div class="person">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

    <div class="person2">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

  </div>
</div>

Answer 1

从内容中删除float。它会起作用。

#subcontent {
  margin: 0 auto;
  width: 70%;
  border-top: 1px solid #ececec;
  background-color: red;
}
.person {
  float: left;
  display: block;
  margin: 0 auto;
  width: 50%;
}
p {
  font-size: 12px;
  margin-left: 90px;
}
.group2 {
  overflow: hidden;
  margin: 0 auto;
}

.textwrap {
  float: left;
  width: 80px;
}

<div id="subcontent">
  <div class="group2">
    <div class="person">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

    <div class="person">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

  </div>
</div>

Answer 2

删除float并更改了%

中的width个尺寸

#subcontent {
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid #ececec;
    background-color: red;
}

.person {
    float:left;
    margin: 0 auto;
    width: 50%;
   
}
p{
    font-size: 12px;
    display: block;
    line-height: 18px;
}
.group2 {
    overflow: hidden; 
    margin: 0 auto;
 }
.person2 {
    float:left;
    display: block;
    margin: 0 auto;
    width: 50%;  
}
.textwrap {
    float:left;
    margin-right: 15px;
}

<div id="subcontent">
<div class="group2">
<div class="person">
<img  class="textwrap" src="http://i.imgur.com/zzqeeyc.png">
 
  <p>A creative man is motivated by the desire to achieve, not by the desire to beat others.

 Jane Goodall - Residential Customer</p>
 </div>

<div class="person2">
<img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">
 
  <p>A creative man is motivated by the desire to achieve, not by the desire to beat others.

 Jane Goodall - Residential Customer</p>
 </div>

</div>
</div>

Answer 3

＆＃13;

#subcontent {
  margin: 0 auto;
  width: 100%;
  border-top: 1px solid #ececec;
  background-color: red;
}
.person {
  display: block;
  float: left;
  margin: 0 auto;
  width: 50%;
}
p {
  clear: right;
  float: left;
  font-size: 12px;
  padding: 0 2%;
  width: 48%;
}
.group2 {
  overflow: hidden;
  margin: 0 auto;
}
.person2 {
  float: left;
  display: block;
  margin: 0 auto;
  width: 50%;
}
.textwrap {
  float: left;
  clear: left;
}

＆＃13;

<div id="subcontent">
  <div class="group2">
    <div class="person">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

    <div class="person2">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

  </div>
</div>

＆＃13;

Answer 4

您的代码存在许多问题。首先，css类用于重用，因此不需要与.person2具有完全相同规则的.person类。然后，你的代码闻到了绝望的尝试，以达到预期的效果，所以它有很多不必要的陈述。第三，请理解，以百分比表示width始终引用父元素的宽度，因此如果您的父元素具有width: 70%;并且您想要将子元素均匀分配到内部，则需要设置子元素的宽度为50％，而不是35％。

你应该可以从这里开始：

* {
  box-sizing: border-box;
}
#subcontent {
  margin: 0 auto;
  width: 70%;
  border-top: 1px solid #ececec;
  background-color: red;
}
.person {
  float: left;
  width: 50%;
}
p {
  font-size: 12px;
}
.textwrap {
  float: left;
  clear: left;
}
#subcontent:after {
  display: table;
  content: "";
  clear: both;
}

<div id="subcontent">
  <div class="group2">
    <div class="person">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

    <div class="person">
      <img class="textwrap" src="http://i.imgur.com/zzqeeyc.png">

      <p>A creative man is motivated by the desire to achieve, not by the desire to beat others. Jane Goodall - Residential Customer</p>
    </div>

  </div>
</div>

如果您对box-sizing: border-box;的行为感到好奇，please read this。此外，我应用了所谓的micro clearfix的“最新”版本来清除#subcontent容器上的浮动。

将文本放在图像的右侧

4 个答案: