在特定位置显示div

时间：2015-11-18 10:35:44

标签： html css web

我创建了一个webpage，看起来像enter image description here

我必须在我制作的黄色标记中显示图像库。我已经尝试了一切，但它低于footer。我能想到如何实现这个目标吗？

这是我的代码

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index_style.css">
    </head>
    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li><a href="#">Home</a></li>

                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="pull-right">
                    <li>Welcome to our Store</li>
                    <li><a href="login_page.html">Login</a></li>
                    <li>or</li>
                    <li><a href="register_page.html">Register</a></li>
                    <li>yourself!</li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>

        <div class="extra0">
            <div class="cata-head">
                Choose a category!
            </div>
            <ul class="cata">

                <li><a href="#">Men's Clothing</a></li>
                <li><a href="#">Men's Accesories</a></li>
                <li><a href="#">Women's Clothing</a></li>
                <li><a href="#">Women's Accesories</a></li>
                <li><a href="#">Baby Products</a></li>
            </ul>
        </div>

        <div class="extra">
            <a href="#"><img src="extra.png"></a>
            <a href="#"><img src="extra1.png"></a>
        </div> 

        <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>

        <div class="foot">
            <footer>
                Policies: Terms of use | Security | Privacy | Infringement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b> UsamaRehan & AsjadHussaini&#169;</style> </b>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="https://facebook.com"><img src="face.png"></a> &nbsp;&nbsp;
                <a href="https://twitter.com"><img src="tweet.png"></a> &nbsp;&nbsp;
                <a href="https://youtube.com"><img src="you.png"></a>
            </footer>
        </div>
    </body>
</html>

****** CSS 

body {
     //overflow: hidden;
    background-color: #d0e4fe;
    //background-image: url("background.jpg");
    font-family: "Book Antiqua",Times New Roman, Georgia, Serif;


}
.nav
{
    border-style: solid;
}
.nav a {
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav li {
    display: inline;

}

a:hover {
    color: coral;
}
.pull-left
{

    float:left
}

.pull-right
{
    float:right
}

.clear
{
    clear:both;
}
.container
{
    padding-right: 75px;

    margin-right: auto;
    margin-left: auto;
    background-color:#bbb;
}

.extra0{

    background-color: #555;
    width: 250px;
    padding-bottom: 10px;
    margin-top: 5px;
    border-style: solid;
    border-color: #0ca3d2;

}
.cata-head
{
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0px 5px 15px;
    text-transform: uppercase;
    color: activeborder;
    border-style: solid;
    border-bottom-color: #0ca3d2;

    border-left-color:#555;
    border-right-color: #555;
    border-top-color: #555;



}
.cata
{
    color: #b3c0c8;
    list-style-image: url("list.png");
    line-height: 2.333em;

}

.foot
{
    background:#ffab62;
    width:100%;
    height:30px;
    position:absolute;
    bottom:0;
    left:0;
    padding-left: 15px;
    padding-bottom: 5px;

}
b
{
    color: firebrick;
}
.extra
{
    width: 250px;
    padding-top: 12px;
    padding-left: 12px;
}

.main
{

   border-style: solid;
   border-color: black;
   display: block;
   width: 250px;
   margin: 10px 10px;

}
div.img {
   /* margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;*/
    margin: 10px 10px;
    width: auto;
    border:3px solid #73AD21;
    padding: 10px;
    float: left;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}

4 个答案:

答案 0 :(得分：1)

我添加了一些额外的div来浮动元素。这是http://codepen.io/anon/pen/yYwVLM

下面的链接

HTML 

<div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li><a href="#">Home</a></li>

                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="pull-right">
                    <li>Welcome to our Store</li>
                    <li><a href="login_page.html">Login</a></li>
                    <li>or</li>
                    <li><a href="register_page.html">Register</a></li>
                    <li>yourself!</li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>

<div class="clear"></div>

<div class="pull-left">
        <div class="extra0">
            <div class="cata-head">
                Choose a category!
            </div>
            <ul class="cata">

                <li><a href="#">Men's Clothing</a></li>
                <li><a href="#">Men's Accesories</a></li>
                <li><a href="#">Women's Clothing</a></li>
                <li><a href="#">Women's Accesories</a></li>
                <li><a href="#">Baby Products</a></li>
            </ul>
        </div>

        <div class="extra">
            <a href="#"><img src="extra.png"></a>
            <a href="#"><img src="extra1.png"></a>
        </div> 
</div>
<div class="pull-left">
  ADD GALLERY HERE <br>
       <img src="http://placehold.it/500x200">
   <img src="http://placehold.it/500x200">
   <img src="http://placehold.it/500x200">

</div>
<div class="clear"></div>
       <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>

<div class="clear"></div>

        <div class="foot">
            <footer>
                Policies: Terms of use | Security | Privacy | Infringement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b> UsamaRehan & AsjadHussaini&#169;</style> </b>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="https://facebook.com"><img src="face.png"></a> &nbsp;&nbsp;
                <a href="https://twitter.com"><img src="tweet.png"></a> &nbsp;&nbsp;
                <a href="https://youtube.com"><img src="you.png"></a>
            </footer>
        </div>

CSS 

    body {
    overflow: hidden;
    background-color: #d0e4fe;
    background-image: url("background.jpg");
    font-family: "Book Antiqua",Times New Roman, Georgia, Serif;


}

.nav
{
    border-style: solid;
}
.nav a {
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav li {
    display: inline;

}

a:hover {
    color: coral;
}
.pull-left
{

    float:left;
}

.pull-right
{
    float:right;
}

.clear
{
    clear:both;
}
.container
{
    padding-right: 75px;

    margin-right: auto;
    margin-left: auto;
    background-color:#bbb;
}

.extra0{

    background-color: #555;
    width: 250px;
    padding-bottom: 10px;
    margin-top: 5px;
    border-style: solid;
    border-color: #0ca3d2;

}
.cata-head
{
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0px 5px 15px;
    text-transform: uppercase;
    color: activeborder;
    border-style: solid;
    border-bottom-color: #0ca3d2;

    border-left-color:#555;
    border-right-color: #555;
    border-top-color: #555;



}
.cata
{
    color: #b3c0c8;
    list-style-image: url("list.png");
    line-height: 2.333em;

}

.foot
{
    background:#ffab62;
    width:100%;
    height:30px;
    position:absolute;
    bottom:0;
    left:0;
    padding-left: 15px;
    padding-bottom: 5px;

}
b
{
    color: firebrick;
}
.extra
{
    width: 250px;
    padding-top: 12px;
    padding-left: 12px;
}

.main
{

   border-style: solid;
   border-color: black;
   display: block;
   width: 250px;
   margin: 10px 10px;

}
div.img {
   /* margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;*/
    margin: 10px 10px;
    width: auto;
    border:3px solid #73AD21;
    padding: 10px;
    float: left;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}

答案 1 :(得分：1)

我改变了你的html结构，即

使用类库创建了一个div，并将所有图像放在div中

在您的HTML中，您的图片没有父母。如果您使用父母，那么它将有助于根据父母移动所有冷藏。

注意：全屏查看结果

的

的 
<div class="container">
    <div class="extra0">
     </div>
    <div class="gallery">
    <!---all imaged-->
    </div>
</div>

的

＆＃13;
＆＃13; 
body {
    //overflow: hidden;
    background-color: #d0e4fe;
    //background-image: url("background.jpg");
    font- amily: "Book Antiqua", Times New Roman, Georgia, Serif;
}

.nav {
    border - style: solid;
}

.nav a {
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav li {
    display: inline;
}

a:hover {
    color: coral;
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.clear {
    clear: both;
}

.container {
    padding-right: 75px;
    margin-right: auto;
    margin-left: auto;
    background-color: # bbb;
    width: 100 %;
    display: inline-block;
}

.extra0 {
    background-color: #555;
    width: 20%;
    display: inline-block;
    padding-bottom: 10px;
    margin-top: 5px;
    border-style: solid;
    border-color: #0ca3d2;
}

.cata - head {
    font-size: 18 px;
    font-weight: bold;
    padding: 10px 0px 5px 15px;
    text-transform: uppercase;
    color: activeborder;
    border-style: solid;
    border-bottom-color: #0ca3d2;
    border-left-color: #555;
    border-right-color: #555;
    border-top-color: #555;
}

.cata {
    color: #b3c0c8;
    list-style - image: url("list.png");
    line-height: 2.333em;
}

.foot {
    background: #ffab62;
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-left: 15px;
    padding-bottom: 5px;
}

b {
    color: firebrick;
}

.extra {
    width: 250px;
    padding-top: 12px;
    padding-left: 12px;
}

.main {
    border-style: solid;
    border-color: black;
    display: block;
    width: 250px;
    margin: 10px 10px;
}

div.img {
    /* margin: 5px;
     padding: 5px;
     border: 1px solid #0000ff;
     height: auto;
     width: auto;
     float: left;
     text-align: center;*/
    margin: 10px 10px;
    width: auto;
    border: 3 px solid #73AD21;
    padding: 10px;
    float: left;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a: hover img {
    border: 1 px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}

.gallery {
    width: 75%;
    display: inline-block;
}
＆＃13; 
<div class="nav">
    <div class="container">
        <ul class="pull-left">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
        <ul class="pull-right">
            <li>Welcome to our Store</li>
            <li><a href="login_page.html">Login</a></li>
            <li>or</li>
            <li><a href="register_page.html">Register</a></li>
            <li>yourself!</li>
        </ul>
        <div class="clear"></div>
    </div>
</div>
<div class="container">
    <div class="extra0">
        <div class="cata-head">
            Choose a category!
        </div>
        <ul class="cata">
            <li><a href="#">Men's Clothing</a></li>
            <li><a href="#">Men's Accesories</a></li>
            <li><a href="#">Women's Clothing</a></li>
            <li><a href="#">Women's Accesories</a></li>
            <li><a href="#">Baby Products</a></li>
        </ul>
    </div>
    <div class="gallery">
        <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
</div>
<div class="extra">
    <a href="#"><img src="extra.png"></a>
    <a href="#"><img src="extra1.png"></a>
</div>
<div class="foot">
    <footer>
        Policies: Terms of use | Security | Privacy | Infringement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b> UsamaRehan & AsjadHussaini&#169;</style> </b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://facebook.com"><img src="face.png"></a> &nbsp;&nbsp;
        <a href="https://twitter.com"><img src="tweet.png"></a> &nbsp;&nbsp;
        <a href="https://youtube.com"><img src="you.png"></a>
    </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我添加了一些新的div和css，这里是链接检查：See demo at eval.in

＆＃13;
＆＃13; 
body {
     //overflow: hidden;
    background-color: #d0e4fe;
    //background-image: url("background.jpg");
    font-family: "Book Antiqua",Times New Roman, Georgia, Serif;


}
.nav
{
    border-style: solid;
}
.nav a {
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav li {
    display: inline;

}

a:hover {
    color: coral;
}
.pull-left
{

    float:left
}

.sidebar {
    float: left;
    width: 250px;
}
.pull-right
{
    float:right
}

.clear
{
    clear:both;
}
.container
{
    padding-right: 75px;

    margin-right: auto;
    margin-left: auto;
    background-color:#bbb;
}
.gallery {
    
    float: left;
	width:80%;
	margin-bottom: 40px;
    
}

.extra0{

    background-color: #555;
    width: 250px;
    padding-bottom: 10px;
    margin-top: 5px;
    border-style: solid;
    border-color: #0ca3d2;

}
.cata-head
{
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0px 5px 15px;
    text-transform: uppercase;
    color: activeborder;
    border-style: solid;
    border-bottom-color: #0ca3d2;

    border-left-color:#555;
    border-right-color: #555;
    border-top-color: #555;



}
.cata
{
    color: #b3c0c8;
    list-style-image: url("list.png");
    line-height: 2.333em;

}

.foot
{
    background:#ffab62;
    width:100%;
    height:30px;
    position:fixed;
    bottom:0;
    left:0;
	float: left;
    padding-left: 15px;
    padding-bottom: 5px;

}
b
{
    color: firebrick;
}
.extra
{
    width: 250px;
    padding-top: 12px;
    padding-left: 12px;
}

.main
{

   border-style: solid;
   border-color: black;
   display: block;
   width: 250px;
   margin: 10px 10px;

}
div.img {
   /* margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;*/
    margin: 10px 10px;
    width: auto;
    border:3px solid #73AD21;
    padding: 10px;
    float: left;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}
＆＃13; 
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index_style.css">
    </head>
    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li><a href="#">Home</a></li>

                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="pull-right">
                    <li>Welcome to our Store</li>
                    <li><a href="login_page.html">Login</a></li>
                    <li>or</li>
                    <li><a href="register_page.html">Register</a></li>
                    <li>yourself!</li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
<div class="sidebar">
        <div class="extra0">
            <div class="cata-head">
                Choose a category!
            </div>
            <ul class="cata">

                <li><a href="#">Men's Clothing</a></li>
                <li><a href="#">Men's Accesories</a></li>
                <li><a href="#">Women's Clothing</a></li>
                <li><a href="#">Women's Accesories</a></li>
                <li><a href="#">Baby Products</a></li>
            </ul>
        </div>

        <div class="extra">
            <a href="#"><img src="extra.png"></a>
            <a href="#"><img src="extra1.png"></a>
        </div> 
</div>
<div class="gallery">
        <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
		<div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
</div>
        <div class="foot">
            <footer>
                Policies: Terms of use | Security | Privacy | Infringement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b> UsamaRehan & AsjadHussaini&#169;</style> </b>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="https://facebook.com"><img src="face.png"></a> &nbsp;&nbsp;
                <a href="https://twitter.com"><img src="tweet.png"></a> &nbsp;&nbsp;
                <a href="https://youtube.com"><img src="you.png"></a>
            </footer>
        </div>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

有两个div一个侧边栏和图库

答案 3 :(得分：0)

我认为你可以使用绝对位置并给出顶部＆amp;离开你的div。     .IMG {             位置：绝对;             上：30px;             左：30px;         }

相关问题
最新问题