画像の下にテキストを追加することはできません。クリアタグなしでテキストを配置することはできません。

Question

何らかの理由で、クリアタグを使用しない限り、テキスト1が画像の下ではなく次の列に移動します。クリアタグを使用する際の問題は、テキスト1がクリアタグの前にあった場所の周りにtext2を追加できないことです。なぜなら、段落の前に大きなスペースがあるからです。

また、テキスト・アラインメントは、ページ上にテキストを中央に配置しません。その内容の周囲にテキストを配置します。どのように私はこれを修正するのですか？

Jsfiddle - https://jsfiddle.net/p6eocccj/

HTML

<div id="div1"> 
<p id="text0"><span id="sp1pg4">About me</span></p> 
<img id="img1" src ="images/hack.jpg"/> 
<br> 
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br> 
<a href="www.google.com">www.homersimpsoniscooltoo.com</a></p> 
<p id="text2"> 
Hi there! 
<br></br> 
I'm bob, a coool designer and developer<br> 
from Far far coolioland, Australia. I<br> 
specialise in cooking, shipping, shopping,<br> 
camping and turning coffee into popcorn. My<br> 
approach to buytying is this, make it clean and<br> 
simple but also focus on the buying for men. This<br> 
is what differentiates poor people from great chimps.<br> 
Whether you want to build a house for as long as<br> 
business, a personal toy or just ask you some<br> 
</p> 
</div> 

CSS

#div1 { 
width: max-width; 
height: 1650px; 
background-color: #ECECEC; 
} 

#text0 { 
text-align: left; 
padding-top: 25px; 
padding-left:150px; 
} 

#img1 { 
float:left; 
margin-top: 25px; 
margin-left:150px; 
width: 220px; 
height: 220px; 
border-radius: 50%; 
} 

#text1 { 
clear:left; 
float:left; 
padding-left:160px; 
font-size:13px; 
line-height:80%; 
} 

#text2 { 
padding-top: 100px; 
line-height: 140%; 
text-align: center; 
font-family: sans-serif; 
font-size: 15px; 
} 

Answer 1

float rulを適用するとeを任意の要素に追加すると、その要素はNormal Document Flowの一部ではなく、テキストがその周囲に折り返されます。 floatを削除するか、clearfixハックを使用してください。

はここclearfix hack-

.clearfix::after { 
    display: table; 
    content: ''; 
    clear: both; 
} 

P.Sです：私はちょうど画像からfloat: leftを削除しました。ハックを使いたい場合は、画像の親にclearfixクラスを適用してください。

#div1 { 
 
     width: max-width; 
 
     height: 1650px; 
 
     background-color: #ECECEC; 
 
} 
 

 
#text0 { 
 
\t text-align: left; 
 
\t padding-top: 25px; 
 
\t padding-left:150px; 
 
} 
 

 
#img1 { 
 
\t margin-top: 25px; 
 
\t margin-left:150px; 
 
\t width: 220px; 
 
\t height: 220px; 
 
\t border-radius: 50%; 
 
} 
 

 
#text1 { 
 
    clear:left; 
 
\t \t float:left; 
 
\t \t padding-left:160px; 
 
\t \t font-size:13px; 
 
\t \t line-height:80%; 
 
} 
 

 
#text2 { 
 
\t padding-top: 100px; 
 
\t line-height: 140%; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    font-size: 15px; 
 
}

<div id="div1"> 
 
<p id="text0"><span id="sp1pg4">About me</span></p> 
 
<img id="img1" src ="images/hack.jpg"/> 
 
<br> 
 
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br> 
 
<a href="www.google.com">www.homersimpsoniscooltoo.com</a></p> 
 
<p id="text2"> 
 
Hi there! 
 
<br></br> 
 
I'm bob, a coool designer and developer<br> 
 
from Far far coolioland, Australia. I<br> 
 
specialise in cooking, shipping, shopping,<br> 
 
camping and turning coffee into popcorn. My<br> 
 
approach to buytying is this, make it clean and<br> 
 
simple but also focus on the buying for men. This<br> 
 
is what differentiates poor people from great chimps.<br> 
 
Whether you want to build a house for as long as<br> 
 
business, a personal toy or just ask you some<br> 
 
</p> 
 
</div>

Answer 2

あなたはフロートを追加しているので、イメージ上の画像tag..removeフロートにに左または要素

をテキストに明確追加