代码之家 › 专栏 › 技术社区 › user287745

如何使用css让div不占用空间

webpage stylesheet

0

user287745 · 技术社区 · 15 年前

我想在css中编写一些属性,这样div只占用所需的宽度,而不是更多。

这是设置为width:60%的width属性;etc接受20%,即使其中的控件或其中的文本不是那么长。比如说“嗨”在div里面还占60%!!!

css

#form1
{
    padding: 0px 0px 0px 0px;
    margin: 0px;
    display:inline-block;
    width:100%; 
    font-family: Times New Roman;
    font-size: 2em;

}

#container
{
    margin: 0 auto;
    width: 100%; 
    /*background-color: Yellow;*/  /* for testing*/
}



#header
{
    background: #ccc;
    padding: 20px; /*remove as needed*/
    color: Blue;
    text-align:center;
}



#navigation
{
    float: left;
    width: 100%;
    background: White;/* black*/
    color:White;
    font-size: smaller;
}


#ul
{
    margin: 0;
    padding: 0;
}



#link
{
    list-style-type: none;
    display: inline;
}










/* for url one */
#url1
{
    float: left;
    padding: 0px 5px 0px 5px;
    border-right: 1px solid #fff;
    background-color: White;
}

#url1 a
{
    float: left;
    color: Black;
    text-decoration: none;
}

#url1 a:hover 
{
     background-color:ButtonShadow;
     color:Highlight;
     text-transform:uppercase;
     font-size:xx-large;
}
/*for url one ends*/





#content-container1
{
     padding-top:5px;
     float: left;
     width: 100%;
    /*background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0;*/
}

#content-container2
{
    float: left;
    width: 100%;
    /*background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0;*/
}

#section-navigation
{
    float: left;
    width: 16%;
    border-right-color:White;
    border-right-style:solid;
    border-right-width:thin;
    /*background: gray;*/  /* for testing */
    display: inline;
}


#leftul
{
    margin: 0;
    padding: 0;
}



#leftlink
{
    padding-left:0.2em;
    list-style-type: none;
    /*background-color: Yellow;*/  /*for testing */
}  

#leftlink a
{
    color: Aqua;
    text-decoration: underline;
}



#content
{
    border-left-color: White; 
    border-left-style:solid;
    border-left-width:thin;
    float: left;
    width: 56%;

}


#aside
{
    float: right;
    width: 16%;
    padding: 20px 0;
    margin: 0 2% 0 0;
    display: inline;
}

#aside h3 { margin: 0; }

#footer
{
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}

.symbols
{
    font-family: Webdings;

}

还有照片

alt text

ie6显示的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">
<head><title>

</title><link rel="stylesheet" type="text/css" href="LAYOUT1.css" /></head>
<body>
    <form name="form1" method="post" action="DynamicLayout.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZOy4VHs0ZOF6zRS6A7E09eCqf5GY" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKFjacpAqDAiY0LQudCxpijJWZK6qWohE+SufqyOGA=" />
</div>
    <div>
    </div>

    <div id="container" runat="server">
    <div id="header" runat="server">
        <span>The header from code label</span><input name="ctl03" type="text" value="This is the text box" />
    </div><div id="navigation" runat="server">
        <div id="ul" runat="server">
            <div id="link" runat="server">
                <div id="url1" runat="server">
                    <a class="symbols" href="#">H</a>
                </div><div id="url2" runat="server">
                    <a href="#">About</a>
                </div>
            </div>
        </div>
    </div><div id="content-container1" runat="server">
        <div id="content-container2" runat="server">
            <div id="section-navigation" runat="server">
                <div id="leftul" runat="server">
                    <div id="leftlink" runat="server">
                        LEFT SIDE
                    </div>
                </div>
            </div><div id="content" runat="server">
                This is the center of the page
            </div>
        </div>
    </div>
</div></form>
</body>
</html>

1 回复 | 直到 15 年前

1

Brad 15 年前

试试这个款式

.asNarrowAsPossible
{
   width:1%; /* encourages the container to be very narrow */
   white-space: nowrap; /* forces the content to one line*/
}