Question

我想设计我的网站。我有两个主要的div，其中一个是“标题”，另一个是“内容”。我想设置宽度属性：80％，我为它们设置了中心。但我不这样做。关于标题div的其他问题。我上传了一张图片，我想这样设计。我怎么能做所有这些？

Header

我的CSS：

    #main
    {
        margin:0px auto;
        margin-left:50px;
        margin-right:50px;
        margin-top:25px;
        margin-bottom:25px;
        height:auto;
        text-align:center;}

 #content
    {

        width:80%;
        height:auto;
        margin:0px auto;
        }

    #header
     {

         width:80%;
         height:100px;
         top:20px;
         }

    #header_left
     {

        float:left ;
        height: 100px;
        text-align: center;
        }

    #header_right
    {
        margin:0px auto;
        height:30px;
        text-align:center;
        margin-top:35px;
        }

        #header_social
        {

            float:right;
            height:30px;
            text-align:center;
            margin-top:35px;}

我的客户代码：

<div id="main">

    <div id="content">

    <div id="header">

    <div id="header_left">
    <asp:Image ID="Image1" runat="server" />
    </div>

    <div id="header_right">

    <asp:LinkButton ID="LinkButton5" runat="server" ForeColor="Gray"></asp:LinkButton>&nbsp;|
    <asp:LinkButton ID="LinkButton4" runat="server" ForeColor="Gray" ></asp:LinkButton>&nbsp;|
    <asp:LinkButton ID="LinkButton3" runat="server" ForeColor="#FF3300" ></asp:LinkButton>&nbsp;|
    <asp:LinkButton ID="LinkButton2" runat="server" ForeColor="Gray" ></asp:LinkButton>&nbsp;|
    <asp:LinkButton ID="LinkButton1" runat="server" ForeColor="Gray" ></asp:LinkButton>
    </div>

    <div id="header_social">
        <asp:ImageButton ID="ImageButton1" runat="server"/>
        <asp:ImageButton ID="ImageButton2" runat="server"/>
    </div>

    </div>

     ******CONTENT FIELD*****

    </div>

    </div>

Answer 1

检查这个小提琴：http://jsfiddle.net/2wqe8/28/

我没有上传图像部分。请你详细说明一下吗？

<强>更新
检查内容的另一个小提琴：http://jsfiddle.net/MkP4D/8/

当你使用float时首先提供右浮动元素。欲了解更多信息： CSS Float

标题Div位置根据Content Div编辑

1 个答案: