html - 在特定位置显示一个 div

我创建了一个网页，看起来像这样

我必须在我制作的黄色标记中显示一个图片库。我已经尝试了所有方法，但它位于 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;
}

最佳答案

我添加了一些额外的 div 来 float 元素。这是下面的链接 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;
}

关于html - 在特定位置显示一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33777731/

html - 在特定位置显示一个 div

上一篇：css - 删除传单缩放控件轮廓(？)

下一篇：html - 粘性页脚不是那么粘