1

I've read through tons of stackoverflow looking for an answer to this question. Everyone says use float: left, float:right, overflow: hidden, display: block, etc. but none of it is working for me. I'm thinking it has something to do with my margins, but I've been playing around with it and can't find an answer.

I want my Welcome message to display to the left of my two divs. I'm basically trying to copy the twitter homepage (www.twitter.com).

Fiddle: 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%;
}
4

3 回答 3

4

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

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

jsFiddle 示例

于 2013-08-28T02:34:26.987 回答
2

我将通过创建一个包含登录/注册表单的新 div 来解决此问题，实际上为您的内容创建 2 个列/通道（欢迎来到左侧，表单位于右侧）。我在这里分叉了你原来的 jsFiddle，并添加了一些难看的背景颜色，以明确每个 DIV 的开始和结束位置。特别是当您使用其他“不可见”的 DIV 和浮动时，我发现添加花哨的背景颜色通常可以帮助我掌握事物的着陆/开始/结束位置。

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

#welcome {
    background:green;
    float:left;
    width:35%;
    text-align: center;
    vertical-align: middle; }
#form-boxes {
    background:orange;
    float:left;
    width:65%; }
于 2013-08-28T02:56:41.550 回答
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;
}

更新的演示

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

于 2013-08-28T02:38:20.957 回答