Question

我已经阅读了大量的stackoverflow来寻找这个问题的答案。每个人都说使用float: left，float:right，overflow: hidden，display: block等，但这些都不适用于我。我认为它与我的边缘有关，但我一直在玩它而无法找到答案。

我希望我的欢迎信息显示在我的两个div的左侧。我基本上试图复制Twitter主页（www.twitter.com）。

小提琴： http://jsfiddle.net/CuwA6/

HTML：

<body>          
     <div id="content">
        <div id="welcome">
            <h1>Welcome!</h1>
            <h2>Blah blah blah...</h2>
        </div>

        <div id="login">
        <form>
            <h3>Please Sign In</h3>
            <input type="text" name="email" placeholder="Username or Email" /><br/>
        <input type="text" name="password" placeholder="Password" /><br/>
            <input type="submit" value="Sign In" />
        </form>
        </div>

        <div id="signup">
        <form>
            <h3>Sign up</h3>
            <input type="text" name="name" placeholder="Full Name" /><br/>
        <input type="text" name="email" placeholder="Email" /><br/>
            <input type="text" name="password" placeholder="Password" /><br/>
            <input type="submit" value="Sign Up" />
        </form>
        </div>
    </div>

    <div id="bird">
       <img alt="" src="img/Bird.png" />
</div>

CSS：

body {
    background: url(img/picture2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#welcome {
    margin: 0 30%;
    text-align: center;
    vertical-align: middle;
}
#login, 
#signup {
    margin: 10px 50%;
    background-color: #F0F0F0;
    padding: 0px 25px 25px 15px;
    border: 1px solid;
    border-radius: 15px;
    width: 300px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}
#bird {
    z-index: 0;
    position: fixed;
    bottom: 0px;
    left: 0px;
}
input {
    margin: 3px 0px;
    padding: 5px;
    width: 100%;
}

Answer 1

将欢迎div左移将移动到其他div的左侧。

#welcome {
    margin: 0 30%;
    text-align: center;
    vertical-align: middle;
    float:left;
}

<强> jsFiddle example

Answer 2

您可以尝试删除margin并将float:left添加到您的欢迎邮件中，如下所示：

#welcome {
    float:left;
    width: 40%; //added as an edit to the answer based on feedback
    text-align: center;
    vertical-align: middle;
}

Updated Demo

注意：删除margin是可选的。但这样做可以确保部分文本不会隐藏在login div下。

Answer 3

我会通过创建一个包含登录/升级表单的新div来解决此问题，实际上为您的内容创建了2列/频道（欢迎使用左侧，右侧是表格）。我在这里forked你的原始jsFiddle，并添加了一些丑陋的背景颜色，以便清楚每个DIV的开始和结束位置。特别是当你使用其他“看不见的”DIV和花车时，我发现添加花哨的背景颜色通常可以帮助我掌握物体着陆/开始/结束的位置。

在此示例中，我更新了您的#welcome DIV并添加了以下内容：

#welcome {
    background:green;
    float:left;
    width:35%;
    text-align: center;
    vertical-align: middle; }
#form-boxes {
    background:orange;
    float:left;
    width:65%; }

将div放在一起

3 个答案: