Question

我在与DIV并排放置方面遇到了一些麻烦。图像会有所帮助。

我需要将红色框（或我喜欢的任何其他东西）放入绿色轮廓区域。我想尝试避免浮动之类的东西：左;因为它破坏了导航栏的格式。

我尝试在导航栏周围使用span标签，使用左侧特定数量的像素（这不起作用，我不喜欢这样做）。

请记住，我是初学者，因此缺乏经验。

http://imageshack.us/photo/my-images/12/webjd.jpg/

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">
        <img id="header" alt="Banner" longdesc="Text Here" src="rsc/banner_phone.jpg"/>

        <div class="sidebar">
            <ul class="navigation">
                <li class="current"><a href=""><em class="home"></em><b>Homepage</b></a></li><br /><br />
                <li><a href=""><em class="templates">           </em><b>Homepage</b></a></li><br /><br />
                <li><a href="d"><em class="psd">                </em><b>Homepage</b></a></li><br /><br />
                <li><a href=""><em class="tutorials">           </em><b>Homepage</b></a></li><br /><br />
                <li><a href=""><em class="shop">                </em><b>Homepage</b></a></li><br /><br />
                <li><a href=""><em class="contact">             </em><b>Homepage</b></a></li><br /><br />
            </ul>                                       
        </div>

        <div class="main">
            <p>sdfds</p>
        </div>

    </div>
</body>


</html>


css:

    /* PAGE CONTAINERS */
        /* Background Color */
    body {
        background:#CCCCCC
    }

    .page {
        width:80%;
        margin-left:10%;
        background-color:white;
        box-shadow: 4px 4px 4px #000000;
    }

    .main {
        position:absolute;
        left:180px;
        background-color:red;
    }

    /* NAVIGATION ELEMENTS */

    #header {
    width:100%;
    height:185px;
    }

    .navigation {
        padding:3px 0 3px 0;
        margin:0;
        list-style:none;background-color:#DDDDDD;
    width:180px;
    height:100%;

        }

    .navigation li a {
        float:left;
        height:40px;
        line-height:40px;
        text-decoration:none;
        font-family:arial, verdana, sans-serif;
        text-align:center;
        padding:0 0 0 10px;
        font-size:11px;
    }
    .navigation li a b {
        float: left;
        display: block;
        padding: 0 20px 0 8px;
    }
    .navigation li.current a {
        color:#0000FF;
        font-weight: bold;
            font-size:13px;
    }
    .navigation li a:hover {
        color:#0000FF;
     padding: 0 0px 0 20px;
     }
    .navigation li a em {
        display:block;
        float:left;
        width:30px;
        height:40px;
    }

    /* ICON ELEMENTS */

    .navigation li a em.home {
        background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/home.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .navigation li a em.templates {
        background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/templates.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .navigation li a em.psd {
        background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/psd.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .navigation li a em.tutorials {
        background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/tutorials.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .navigation li a em.shop {
        background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/shop.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .navigation li a em.contact {
        background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/contact.png);
        background-repeat: no-repeat;
        background-position: center center;

Answer 1

您可以做的是将css属性添加到要在同一行显示的2 div's中：

display: inline-block;

因此，您可以将其添加到侧边栏和绿色框（在图像中）。

请记住，这不是一种好的做法。

Answer 2

问题是，如果你浮动：正确地留下两个具有属性的div，只要它们在另一个div容器内，它们不应该超出界限并破坏该容器外的任何东西，假设容器可以适合他们。这完全是关于“溢出”和div大小。为了看看有什么更好，我建议使用firefox并获得一个名为firebug的扩展，它在Web开发中是非常宝贵的。

div容器中的HTML并排div

2 个答案: