gpt4 book ai didi

css - 并排放置div

转载 作者:行者123 更新时间:2023-11-28 04:21:37 25 4
gpt4 key购买 nike

我已经阅读了大量的 stackoverflow 来寻找这个问题的答案。每个人都说使用float: leftfloat:rightoverflow: hiddendisplay: block等,但是这些都不适合我。我认为这与我的利润率有关,但我一直在研究它,但找不到答案。

我希望我的欢迎消息显示在我的两个 div 的左侧。我基本上是在尝试复制 Twitter 主页 (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%;
}

最佳答案

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

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

jsFiddle example

关于css - 并排放置div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18478450/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com