html - フローティング画像左

Question

私は html と css に少し慣れていないので、2 つの画像を重ねて表示することができません。コードはこちら...

    <div class="kbody">
        <img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto">      
    <div id="ktxt">
        <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        Kristallnacht occurred on November 9-10, 1938. Also known as the night of 
        broken glass, it was an organized attack on the Jews. Hitler had Nazis all over 
        Germany and Austria that burned synagogues, broke store windows, stole from the
        stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days 
        later Germany made an &quotatonement fine&quot that added up to over one billion dollars 
        and placed it on the remaining Jews. </p>
    </div>
    <img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto">
    </div>

そしてCSS...

.kbody {
width:800px;
margin-left: auto;
margin-right: auto;
/*border-style:solid;
border-width:3px;*/
}

.kimg1 {
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
float:left;
}

.kimg2 {
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
float:left;
margin-top:10px;
}

#ktxt {
padding-left:10px;
padding-right:10px;
padding-top:10px;
/*border-width:2px;
border-style: solid;*/
width:350px;
height:330px;
margin-left:402px;
font-style:arial, sans-serif;
color: #336699;
font-size:14pt;
}

私は何を間違っていますか?? これは、このコードでどのように見えるかです http://imgur.com/a/ivDE2#0

Answer 1

2番目の画像を最初の画像の下に移動するには：

.kimg2 {
    clear: both;
}

Answer 2

<div class="kbody">
    <img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto">      
<div id="ktxt">
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Kristallnacht occurred on November 9-10, 1938. Also known as the night of 
    broken glass, it was an organized attack on the Jews. Hitler had Nazis all over 
    Germany and Austria that burned synagogues, broke store windows, stole from the
    stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days 
    later Germany made an &quotatonement fine&quot that added up to over one billion dollars 
    and placed it on the remaining Jews. </p>
</div>
<img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto">
<div style="clear:both"></div>
</div>

Answer 3

1. 別々の行に表示する要素の間にクリアフィックスを配置します。次のようなグローバルcssルールを記述し.clearfix { clear: both; }、2番目の画像の前にdivを配置します。

2. たくさんの 使用CSStext-indentプロパティを書く代わりに;

サンプルコード：

<div class="kbody">
    <img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto">      
    <div id="ktxt">
        <p>
        Kristallnacht occurred on November 9-10, 1938. Also known as the night of 
        broken glass, it was an organized attack on the Jews. Hitler had Nazis all over 
        Germany and Austria that burned synagogues, broke store windows, stole from the
        stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days 
        later Germany made an &quotatonement fine&quot that added up to over one billion dollars 
        and placed it on the remaining Jews. 
        </p>
    </div>
    <div class="clearfix"></div>
    <img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto">
</div>

Answer 4

あなたがあなたの写真を左側に浮かせたいので、あなたがそうするようにそれは不可能です。だから、あなたはあなたが望むもののために代わりにあなたのhtmlを定義するべきです。

<div class="kbody">
    <div class="kimg">
         <img ..image1../>
         <img ..image2../>
    </div>
    <div id="ktext">your text...</div>
</div>

次に、cssを定義します。

ヒント：

.kimg{width: 300px;}
#ktext{width: 300px;}

Answer 5

画像をラップしてみてください

html

<div class="kbody">
        <div class="imageWrapper">
        <img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto" />
        <img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto" />
        </div>
    <div id="ktxt">
        <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        Kristallnacht occurred on November 9-10, 1938. Also known as the night of 
        broken glass, it was an organized attack on the Jews. Hitler had Nazis all over 
        Germany and Austria that burned synagogues, broke store windows, stole from the
        stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days 
        later Germany made an &quotatonement fine&quot that added up to over one billion dollars 
        and placed it on the remaining Jews. </p>
    </div>

    </div>

CSS

.imageWrapper {
    float:left;
    width:375px;
}

これがあなたを助けることを願っています

Answer 6

簡単な方法は<img src="yourimage.jpg" align="left" />