我的照片出格

我有一個問題，我有一個div，它的背景顏色是黑色的。我在div裏放了兩張圖片，但是當我看到它們是按照列表順序的時候，我說沒問題，我想要在div中並排，所以我做了「float：left」。但現在他們完全沒有特別的！請幫忙！！！！！我的照片出格

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
div.images { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
} 
 

 
#styles { 
 
     margin: auto; 
 
     background-color: black; 
 
\t \t color: white; 
 
\t \t padding: 20px; 
 
\t \t width: 60% 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div id="styles"> 
 
<h1>First heading.</h1> 
 
<p>Check check</p> 
 
<hr> 
 
<p>Some pictures</p><br> 
 
<div class="images"> 
 
     <img src="Nabeel1.jpg" width="200" height="200"> 
 
\t <div class="desc">Tom Clancy's</div> 
 
</div> 
 
<br> 
 
    <div class="images"> 
 
     <img src="usama.jpg" width="200" height="200"> 
 
\t <div class="desc">Tom Clancy's</div> 
 
</div> 
 
</div> 
 
</body>

來源

2016-11-07 cleo master

的可能的複製[浮動圖像滲出其DIV容器到另一個的div]（http://stackoverflow.com/questions/16381405/floating-image-bleeds-out -of-其-DIV容器 - 進入 - 另一個-DIV） – Rob

你需要元素清晰：兩者;在浮動元素序列的末尾。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
div.images { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
    overflow:hidden; 
 
} 
 

 
#styles { 
 
     margin: auto; 
 
     background-color: black; 
 
\t \t color: white; 
 
\t \t padding: 20px; 
 
\t \t width: 60% 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div id="styles"> 
 
<h1>First heading.</h1> 
 
<p>Check check</p> 
 
<hr> 
 
<p>Some pictures</p><br> 
 
<div class="images"> 
 
     <img src="Nabeel1.jpg" width="200" height="200"> 
 
\t <div class="desc">Tom Clancy's</div> 
 
</div> 
 
<div class="images"> 
 
     <img src="usama.jpg" width="200" height="200"> 
 
\t <div class="desc">Tom Clancy's</div> 
 
</div> 
 
    <div style="clear:both"></div> 
 
</div> 
 
</body>

來源

2016-11-07 18:54:30

，這是爲我工作

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.images { 
    margin: 5px; 
    border: 1px solid #ccc; 
    width: 200px; 
    height: 200px; 
    float: left; 
    clear: none; 
} 

body { 
    margin: auto; 
    background-color: black; 
    color: white; 
    padding: 20px; 
    width: 60% 
} 
</style> 
</head> 
<body> 
    <h1>First heading.</h1> 
    <p>Check check</p> 
    <hr> 
    <p>Some pictures</p> 
    <div class="images"> 
    <img src="img.jpg" width="200" height="200"> 
    <div class="desc">Tom Clancy's</div> 
    </div> 
    <div class="images"> 
    <img src="img.jpg" width="200" height="200"> 
    <div class="desc">Tom Clancy's</div> 
    </div>

來源

2016-11-07 19:28:05

任何元素應該被允許在任一浮動div

的左側或右側閱讀更多約clear at MDN

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
div.images { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
    overflow: hidden; 
 
} 
 

 
#styles { 
 
     margin: auto; 
 
     background-color: black; 
 
\t \t color: white; 
 
\t \t padding: 20px; 
 
\t \t width: 60% 
 
} 
 
.clear{ 
 
     clear: both; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div id="styles"> 
 
<h1>First heading.</h1> 
 
<p>Check check</p> 
 
<hr> 
 
<p>Some pictures</p><br> 
 
<div class="images"> 
 
     <img src="Nabeel1.jpg" width="200" height="200"> 
 
\t <div class="desc">Tom Clancy's</div> 
 
</div> 
 
<br> 
 
    <div class="images"> 
 
     <img src="usama.jpg" width="200" height="200"> 
 
\t <div class="desc">Tom Clancy's</div> 
 
</div> 
 
<div class="clear"></div> 
 
</div> 
 
</body>

來源

2016-11-07 19:28:29 Abk

我的照片出格

回答

相關問題