テキストを画像の右に置く

Question

テキストを画像の右に置くにはどうすればいいですか？http://i.imgur.com/3hDi0mW.png。私は私のためにcommands..butの明確な、float..aたくさんで試してみましたが、それは動作しません。..

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クラスはの再利用を対象としているため、.personとまったく同じルールを持つ.person2クラスは必要ありません。そして、あなたのコードは、望みの効果を達成しようと必死になってしまうので、多くの不必要な記述が残っています。第3に、widthのパーセント表示は常に親要素の幅を参照するので、親要素がwidth: 70%;で均等に分割されるようにするには、子要素の幅を35％ではなく50％に設定する必要があります。 。

ここから始めることができる必要があります：

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

あなたがplease read this、そのbox-sizing: border-box;が何をするかについての好奇心なら。また、私は#subcontentコンテナ上のフロートをクリアするために、いわゆるmicro clearfixの "最新の"バージョンを適用しました。