Question

嘿伙计们，我希望我的两个#previews并排浮动。我试过添加float：left但它不起作用。目前他们只是坐在彼此的顶部。我的所有代码都在下面，感谢您的帮助。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Juicy Designs</title>

<meta name="description" content="Juicy Designs">  

<meta name="author" content="Juicy Designs">

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<!--[if lt IE 9]>  

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  

<![endif]--> 

<style>

body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>

</head>

<body>

<div id="logo"></div>

<div id="container">

<div class="line"></div>

<h2>Simple, clean & modern designs</h2>

<p>We create simple, clean and modern designs!</p>

<div class="line"></div>

<div id="previews"><img src="preview.jpg" /></div>

<div id="previews"><img src="preview.jpg" /></div>

</div>

</body>

</html>

Answer 1

将它们浮动到左侧，它将起作用。你还需要清除它们。

Answer 2

一些事情： a）DIV是块级的。您需要将它们定义为display：inline;让浮动工作。 b）您应该使用类而不是ID。 ID应该只在页面上出现一次。课程可以根据您的意愿出现多次。

Answer 3

这就是全部：

<div id="previews">
    <img src="preview.jpg" style="float:left;" />
    <img src="preview.jpg" style="float:left;" />
</div>

您也可以使用：

#previews img { 
    float:left;
} 

<div id="previews">
    <img src="preview.jpg" />
    <img src="preview.jpg" />
</div>

Answer 4

<html lang="en"><head>

<meta charset="utf-8">

<title>Juicy Designs</title>

<meta name="description" content="Juicy Designs">  

<meta name="author" content="Juicy Designs">

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<!--[if lt IE 9]>  

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  

<![endif]--> 

<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>

</head>

<body>

<div id="logo"></div>

<div id="container">

<div class="line"></div>

<h2>Simple, clean &amp; modern designs</h2>

<p>We create simple, clean and modern designs!</p>

<div class="line"></div>

<div id="previews"><img src="preview.jpg"></div>

<div id="previews"><img src="preview.jpg"></div>

</div>




</body></html>

您只需在display:inline-block; vertical-align:top;的CSS下添加#previews即可。您还需要减少用于horizontal margin的{{1}}数量，因为容器的宽度仅为1300px。

如何在另一张图像旁边浮动图像？

4 个答案: