浮動圖像左

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

回答

相關問題