將文字右移至圖像

Question

如何將文字右移至圖像，如下所示：http://i.imgur.com/3hDi0mW.png。我曾嘗試與明確，float..a很多commands..but對我來說，這是行不通的..

u能幫助我嗎？謝謝:) 這裏是我的代碼：

#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和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 2

從內容中刪除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 3

#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; 
 
}

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

改變了一些 % ofsize

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的「最新」版本來清除容器上的花車。