html - 如何在一个 div 中制作 4 个 div，div 1[div left, div 3 left] 和 div 4 right

Question

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

    <div id="DivSection">

        <div id="DivContent">
            <div id="DivSlogan">
                <label id="slogan">Facebook help you to connecct and share
                    with the<br> people in your life.
                </label>
            </div>

            <div id="DivHomeImage">
                <img alt="homeImage" src="img\fbhome.png">
            </div>

        </div>

        <div id="DivSignUp">



            <table>

                <tr>
                    <td colspan="2"><label style="font-size: xx-large;"
                        class="lblbold">Create an account</label></td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="2"><label class="lblbold">it's free and
                            always will be.</label></td>
                    <td></td>
                </tr>


                <tr>
                    <td><input id="inputFS" type="text" class="inputSup"
                        name="fname" placeholder="First Name"></td>
                    <td><input id="inputFS" type="text" class="inputSup"
                        name="sname" placeholder="Surname"></td>
                </tr>

                <tr>
                    <td colspan="2"><input type="text" class="inputSup"
                        name="mobeml" placeholder="Mobile number or email address">
                    </td>

                </tr>

                <tr>
                    <td colspan="2"><input type="text" class="inputSup"
                        name="rmobeml"
                        placeholder="Re-Enter mobile number or email address"></td>

                </tr>

                <tr>
                    <td colspan="2"><input type="text" class="inputSup"
                        name="npsw" placeholder="New password"></td>

                </tr>

                <tr>
                    <td><label class="lblbold">Birthday</label></td>
                </tr>

                <tr>
                    <td><select name="day" class="seldob">
                            <option value="0" selected>Day</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>

                    </select> <select name="month" class="seldob">
                            <option value="0">Month</option>
                            <option value="1">Jan</option>
                            <option value="2">Feb</option>
                            <option value="3">Mar</option>
                            <option value="4">Apr</option>
                            <option value="5">May</option>
                            <option value="6">Jun</option>
                            <option value="7">Jul</option>
                            <option value="8">Aug</option>
                            <option value="9">Sep</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                    </select> <select name="year" class="seldob">
                            <option value="0">Year</option>
                            <option value="1">2010</option>
                            <option value="2">2011</option>
                            <option value="3">2012r</option>
                            <option value="4">2013</option>
                            <option value="5">2014</option>
                            <option value="6">2015</option>
                            <option value="7">2016</option>
                    </select></td>
                    <td><label class="lblnote"><a href="">Why do i
                                need to provide my<br> date of birth?
                        </a></label></td>
                </tr>

                <tr>
                    <td colspan="2"><input type="radio" name="gender"
                        value="female"><label>Female</label> <input type="radio"
                        name="gender" value="male" checked><label>Male</label></td>
                </tr>

                <tr>
                    <td colspan="2"><label class="lblnote">By clicking
                            Create an account, you agree to our <a href="">Terms</a> and<br>
                            that you have read our <a href="">Data Policy</a> , including
                            our <a href="">Cookie Use</a>.
                    </label></td>
                </tr>

                <tr>
                    <td id="tdCreAcc" colspan="2"><input id="btnCA" type="submit"
                        name="signup" value="Create an account"></td>
                </tr>

                <tr>
                    <td colspan="2"><label> <a href="">Create a Page</a>
                            for a celebrity, band or business.
                    </label></td>
                </tr>

            </table>

        </div>


    </div>

CSS 代码

body
{
    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;
    display: inline-block;
}



#DivSection
{
    height: 83%;
    position: absolute;
    width: 1024px;   
    border: 1px solid gray;
    padding-top: 23px;
}

#DivContent
{
    width: 50%;
}

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

#DivHomeImage
{ 
    float:left;
    margin-top:  5%;
    position: absolute;
}

#DivSignUp 
{
    float: right;
    border-radius: 5px;
        position:absolute;
    right: 171px;
}





#DivFooter
{

    width:1024px ;
    display: inline-block;
    bottom: 0;

}

Answer 1

我用 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 {
    width: 50%;
    float:left;
}

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

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

<div class="wrapper">
    <div class="container">
        <div class="slogan">
            Facebook slogan goes here
        </div>
        <img src="" alt="image" class="people-image"/>
    </div>
    <div class="container green">
        Login Content goes here
    </div>
</div>