1

こんにちは、2 つの #preview を並べて表示したいと思います。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 は、1 ページに 1 回だけ表示されるはずです。クラスは何度でも表示できます。

于 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。また、コンテナの幅が 1300px しかないため、horizontal margin使用する forの量を減らす必要があります。#previews

于 2012-07-06T14:14:10.157 に答える