CSS如何样式浮动元素像列，（div元素作为列在其他元素之上）

Question

所有。 我被困在CSS中，当我想按照列样式的顺序设置元素时，我使用了float属性但是我没有按照我想要的那样显示，它们显示在行中。例如 我希望它们显示如下

a c
b d

但它们总是显示为

a b c d

这是我的代码：

CSS：

div#Wrapper
{
    margin: 0 auto;
    position: relative;
    min-height: 670px;
    min-width : 1280px;
    overflow: hidden;
    text-align: left;
}

/* HEADER STYLES
----------------------------------------------------------*/

    div#Header
    {
        background: url(../Images/Backgrounds/Header_Bg.png) repeat-x left bottom;
        float: left;
        height: 74px;
        padding-bottom: 21px;
        padding-top: 10px;
        position: relative;
        text-align: left;
        overflow: hidden;
        width: 100%;
    }

    div#Header .logo
    {
        border: none;
        float: left;
        margin-left: 46px;
    }

    div#Header .search-tool
    {
        float: left;
        height: 61px;
        margin-left: 165px;
        width: 429px;
    }

    div#Header .language
    {
        background: #75787a url(../Images/Icons/Language.png) no-repeat left top;
        color: #dedfdf;
        cursor: pointer;
        float: right;
        font-size: 0.8em;
        font-weight: bold;
        line-height: 25px;
        height: 25px;
        margin-right: 18px;
        margin-top: 9px;
        padding: 0 19px 0 48px;
        text-align: center;
        text-transform: uppercase;
    }

    div#Header .login-link
    {
        color: #909090;
        float: right;


    }

    div#Header .login-link a
    {
        background-repeat: no-repeat;
        color: #909090;
        cursor: pointer;
        font-size: 0.75em;
        font-weight: bold;
    }

    .login-link .register
    {
        background-image: url(../Images/Icons/Register.png);
        padding-left: 15px;
    }

    .login-link .signin
    {
        background-image: url(../Images/Icons/signin.png);
        padding-left: 18px;
    }

    div#Header .weather
    {
        float: right;
        height: 40px;
        margin-right: 40px;
        width: 215px;
    }

    .weather .weather-image
    {
        border: none;
        float: left;
        text-align: left;
    }

    .weather .temperture
    {
        color: #c7c7c7;
        float: left;
        font-size: 2.25em;
        font-weight: bold;
        margin: 10px 10px 0 -10px;
        line-height: 24px;
    }

    .weather .city
    {
        color: #c7c7c7;
        font-size: 0.7em;
        font-weight: bold;
        padding-top: 10px;
        text-transform: uppercase;
    }

    .weather .country
    {
        color: #7f7f7f;
        font-size: 0.7em;
        font-weight: bold;
        text-transform: uppercase;
    }

    div#Header .social-link
    {
        float: right;
        position: absolute;
        top: 65px;
        right: 200px;
    }

    .social-link .yh-link
    {
        background: url(../Images/Icons/social-link.png) no-repeat right -2px;
        cursor: pointer;
        float: right;
        height: 12px;
        overflow: hidden;
        text-indent: -9999em;
        width: 80px;
    }

    .social-link .skype-link
    {
        background: url(../Images/Icons/social-link.png) no-repeat -70px top;
        cursor: pointer;
        float: right;
        height: 17px;
        margin: 0 10px;
        overflow: hidden;
        text-indent: -9999em;
        width: 40px;
    }

    .social-link .facebook-link
    {
        background: url(../Images/Icons/social-link.png) no-repeat left -1px;
        cursor: pointer;
        float: right;
        height: 12px;
        overflow: hidden;
        text-indent: -9999em;
        width: 60px;
    }

HTML：

<div id="Wrapper">
        <div id="Header">
            <img class="logo" alt="Viet Ban Do Logo" src="Images/Icons/Logo.png" />
            <a class="language">Tiếng Việt</a>
            <div class="login-link">
                <a class="register">Register</a> | <a class="signin">Sign in</a>
            </div>
            <div class="weather">
                <img class="weather-image" alt="" src="Images/Icons/weather_sun.png" />
                <span class="temperture">32</span>
                <p class="city">
                    Ho chi minh, city</p>
                <p class="country">
                    Viet nam</p>
            </div>
            <div class="social-link">
                <a class="yh-link">Viet Ban Do Yahoo Nick</a> <a class="skype-link">Viet Ban Do skype
                    nick</a> <a class="facebook-link">Viet Ban Do facebook link</a>
            </div>
            <div class="search-tool">
                <p class="search-control">
                    <input type="text" />
                    <a></a>
                    <input type="button" />
                </p>
            </div>
        </div>
    </div>

请提前帮助我修复它！

Answer 1

Here is a good resource on floating.

如果您只想要两列，则可以为容器定义宽度。然后它们会像你想要的那样包裹起来。