0

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

4

6 回答 6

1

要将第二个图像移动到第一个图像下：

.kimg2 {
    clear: both;
}
于 2013-03-20T23:40:45.277 回答
0

尝试包装您的图像

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

希望这对你有帮助

于 2013-03-21T00:32:12.703 回答
0

更简单的方法是<img src="yourimage.jpg" align="left" />

于 2013-03-21T00:42:58.443 回答
0

因为你想让你的图片浮动到左侧是不可能的。所以，你应该为你想要的东西定义你的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;}
于 2013-03-21T02:29:44.390 回答
0 
<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>
于 2013-03-20T23:43:32.487 回答
0

  1. 在要在单独的行中显示它们的元素之间放置一个 clearfix。我会编写一个全局css规则.clearfix { clear: both; }，并在第二张图片之前放置一个div；

  2. 而不是编写一堆&nbsp;使用 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>
于 2013-03-20T23:44:35.327 回答