浮动图像左

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

来源

2013-03-20 Deric miller

'float'不把东西对彼此顶部... – Doorknob 2013-03-20 23:35:28

我彪，我想直接钮PIC顶一个 – 2013-03-20 23:36:26

下哦，对不起。我误解了这个问题 – Doorknob 2013-03-20 23:37:05

要下先移动第二图像：

.kimg2 { 
    clear: both; 
}

来源

2013-03-20 23:40:45 Mupps

非常感谢！ – 2013-03-20 23:46:05

<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-20 23:43:32 zkanoca

把你想显示他们在不同的元素之间的clearfix线。我会写一个像.clearfix { clear: both; }这样的全局CSS规则，并在第二个图像之前放置一个div;
而不是写一堆 使用CSS text-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-20 23:44:35

尝试来包装你的形象

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-21 00:32:12 jhunlio

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

来源

2013-03-21 00:42:58

如您希望您的图片浮动到左边是不可能的，因为你做的。所以，你应该定义你的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-21 02:29:44

回答

相关问题