Question

我有一个问题，我有一个div，它的背景颜色是黑色。我在div中放了两张照片，但是当我看到它们是按照列表顺序时，我说好了，我想要在div中并排放置，所以我做了“漂浮：左;”但现在他们完全没有了！请帮忙!!!!!

<!DOCTYPE html>
<html>
<head>
<style>

div.images {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

#styles { 
        margin: auto;
        background-color: black;
		color: white;
		padding: 20px;
		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">
	  <div class="desc">Tom Clancy's</div>
 </div>
 <br>
  <div class="images">
      <img src="usama.jpg" width="200" height="200">
	  <div class="desc">Tom Clancy's</div>
 </div>
</div>
</body>

Answer 1

你需要明确的元素：两者;在浮动元素序列的末尾。

＆＃13;

another

＆＃13;

Answer 2

这对我有用

x = {0, 1, 5, 3, 2, 1, 0, 4, 4, 2, 3, 4, 1}
a = {1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1}
b = {1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1}
c = {3, 4, 5, 6, 3, 4, 5, 6, 3, 4, 5, 6, 3}

Answer 3

浮动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;
		color: white;
		padding: 20px;
		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">
	  <div class="desc">Tom Clancy's</div>
 </div>
 <br>
  <div class="images">
      <img src="usama.jpg" width="200" height="200">
	  <div class="desc">Tom Clancy's</div>
 </div>
 <div class="clear"></div>
</div>
</body>

我的照片不在div中

3 个答案: