我想像 facebook 注册页面一样，一个div1(section width:1024px)有四个div，左边div2(width:50%) 有div3(fb slogan)，下面div4(connect people image)右侧 div4(宽度:50% 注册表单)。如何制作？[在此处输入图片描述][1]

    


        

            

                Facebook help you to connecct and share
                    with the
 people in your life.
                
            


            

                
            


        


        




            

                
                    
                        class="lblbold">Create an account
                    
                

                
                    it's free and
                            always will be.
                    
                


                
                    
                        name="fname" placeholder="First Name">
                    
                        name="sname" placeholder="Surname">
                

                
                    
                        name="mobeml" placeholder="Mobile number or email address">
                    

                

                
                    
                        name="rmobeml"
                        placeholder="Re-Enter mobile number or email address">

                

                
                    
                        name="npsw" placeholder="New password">

                

                
                    Birthday
                

                
                    
                            Day
                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            10
                            11
                            12
                            13
                            14
                            15
                            16
                            17
                            18
                            19
                            20
                            21
                            22
                            23
                            24
                            25
                            26
                            27
                            28
                            29
                            30
                            31

                     
                            Month
                            Jan
                            Feb
                            Mar
                            Apr
                            May
                            Jun
                            Jul
                            Aug
                            Sep
                            Oct
                            Nov
                            Dec
                     
                            Year
                            2010
                            2011
                            2012r
                            2013
                            2014
                            2015
                            2016
                    
                    Why do i
                                need to provide my
 date of birth?
                        
                

                
                    
                        value="female">Female 
                        name="gender" value="male" checked>Male
                

                
                    By clicking
                            Create an account, you agree to our Terms and

                            that you have read our Data Policy , including
                            our Cookie Use.
                    
                

                
                    
                        name="signup" value="Create an account">
                

                
                     Create a Page
                            for a celebrity, band or business.
                    
                

            

        



    

CSS 代码

thân hình
{
    margin: 0 auto;
    height:100%;
    font-family: Calibri;
    overflow: scroll;
}



#DivBody
{
    margin: auto;
    width:1024px;
}

#DivHeader
{   
    margin:auto;
    width:100%;
    color: white;
    background-color: #3b5998;
    hiển thị: khối nội tuyến;
}



#DivSection
{
    height: 83%;
    vị trí: tuyệt đối;
    width: 1024px;   
    border: 1px solid gray;
    padding-top: 23px;
}

#DivContent
{
    chiều rộng: 50%;
}

#DivSlogan
{
    float:left;
    color: #0e385f;
    font-size: 20px;
    font-weight: đậm;
}

#DivHomeImage
{ 
    float:left;
    margin-top: 5%;
    vị trí: tuyệt đối;
}

#DivSignUp 
{
    float: right;
    border-radius: 5px;
        vị trí: tuyệt đối;
    right: 171px;
}





#DivFooter
{

    width:1024px ;
    hiển thị: khối nội tuyến;
    dưới cùng: 0;

}

1 Câu trả lời

我用 div 和 float 做了一个简单的例子。这将是一百万种可能性之一。我喜欢 float ……其他人会使用定位或一些 flex/网格。

.wrapper {
    width: 1024;
    height: 100%;
    min-height: 800px; //not absolutly needed
    border: 1px solid red; //not needed
}

.slogan {
    padding-top: 20px; //not needed
}

.container {
    chiều rộng: 50%;
    float:left;
}

.people-image {
    width: 100%;
    border: 1px solid yellow; //not needed
}

.green {
    background-color: green; //not needed
}

    

        

            Facebook slogan goes here
        

        
    

    

        Login Content goes here
    

关于html - 如何在一个 div 中制作 4 个 div，div 1[div left, div 3 left] 和 div 4 right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36607004/