1

嘿伙计们，我希望我的两个#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>
4

4 回答 4

2

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

于 2012-07-06T14:11:23.787 回答
2

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

于 2012-07-06T14:12:18.520 回答
1

就这样：

<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>
于 2012-07-06T14:13:06.630 回答
1 
<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使用的数量，#previews因为容器的宽度只有 1300 像素。

于 2012-07-06T14:14:10.157 回答