我已经发布了这个问题..但是没有人回答这个问题。我的代码是:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: 'Cabin', sans-serif;
background-color: #333;
}
.firstnav {
margin:auto;
height: 1500px;
display: block;
width: 70%;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#third {
background: #f00;
position:relative;
display:inline-block;
width: 30%;
margin-left:auto;
margin-right:auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#second {
background: #fff;
position:relative;
display:inline-block;
margin-left:auto;
margin-right:auto;
width: 67%;
height: 1500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#registration-form {
font-family:'Open Sans Condensed', sans-serif;
width: 100%;
margin: 20px auto;
position: relative;
display:block;
position:absolute;
}
#registration-form .fieldset {
background-color:#d5d5d5;
border-radius: 3px;
}
#registration-form legend {
text-align: center;
background: #364351;
width: 100%;
padding: 30px 0;
border-radius: 3px 3px 0 0;
color: white;
font-size:2em;
}
.fieldset form{
border:1px solid #2f2f2f;
margin:0 auto;
display:block;
width:100%;
padding:30px 20px;
box-sizing:border-box;
border-radius:0 0 3px 3px;
}
<div class="firstnav">
<div id="second"><p>second<p></div>
<div id="third">
<div id="registration-form">
<div class='fieldset'>
<legend>Todays news
</legend>
<form action="#" method="post" data-validate="parsley">
</form>
</div>
</div>
</div>
在这里,你可以看到第二个内容正在下降..为什么会发生?我想要两个容器并排..我已经改变了“#second”代码,但它仍然没有出现在一边..
答案 0 :(得分:1)
看起来缺少一条线。元素没有浮动。尝试将float: left;
添加到#second
。
在JSFiddle上玩它。我已经为你做了改变。那是你在找什么? https://jsfiddle.net/jr0gpaqg/
答案 1 :(得分:0)
这对你有用吗。
#second {
background: #fff;
position:relative;
display:inline-block;
float:left;
margin-left:auto;
margin-right:auto;
width: 67%;
height: 1500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
答案 2 :(得分:0)
回答你的问题......改变
#third {
background: #f00;
position:relative;
display:inline-block;
width: 30%;
margin-left:auto;
margin-right:auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
到此......
#third {
background: #f00;
position:absolute;
display:inline-block;
width: 30%;
margin-left:auto;
margin-right:auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
你的定位是你的问题。