Question

如何在右侧或左侧制作2个DIV？如何保持上下位置？如何关闭社交网络的按钮。它需要支持IE8。请帮我。

CSS

/* Searchform 
------------------------------------------------*/
.reach{
    margin-right:20px;
    float:right;
}
input#s{
    padding:5px 10px;
    width:190px;
    background:#3a3a3a;
    border:1px solid #555;
    color:#eee;
}

input#searchsubmit{
    padding:4px 10px;
   background: #b30c09;
   border:1px solid #E5110D;
   box-shadow:none;
   color:#fff;
  }

/* Social
------------------------------------------------*/

#social{
float:right;
margin-top:60px;
margin-right:20px;
}
#social li{
text-indent: -3000px;
display:inline;
float:right;
}
#social li a{
display:block;
width:37px;
height:37px;
overflow:hidden;
}
#social li.rss{
background-image: url(http://2.bp.blogspot.com/-BHE0kA2yQDo/UXsAmEaWl3I/AAAAAAAACeI/Ojdu4dH8j3Y/s000/rss-icon.png);
background-position: top;
}
#social li.rss:hover{
background-image: url(http://2.bp.blogspot.com/-BHE0kA2yQDo/UXsAmEaWl3I/AAAAAAAACeI/Ojdu4dH8j3Y/s000/rss-icon.png);
background-position: 0 -37px;
}
#social li.facebook{
background-image: url(http://4.bp.blogspot.com/-hj3G3FJaRWI/UXsAmXImhJI/AAAAAAAACeQ/vqjcAuFkU3s/s000/facebook-icon.png);
background-position: top;
}
#social li.facebook:hover{
background-image: url(http://4.bp.blogspot.com/-hj3G3FJaRWI/UXsAmXImhJI/AAAAAAAACeQ/vqjcAuFkU3s/s000/facebook-icon.png);
background-position: 0 -37px;
}
#social li.twitter{
background-image: url(http://3.bp.blogspot.com/-aK5JgKcwvQE/UXsAmvwR8-I/AAAAAAAACeY/XaMno5_AoIw/s000/twitter-icon.png);
background-position: top;
}
#social li.twitter:hover{
background-image: url(http://3.bp.blogspot.com/-aK5JgKcwvQE/UXsAmvwR8-I/AAAAAAAACeY/XaMno5_AoIw/s000/twitter-icon.png);
background-position: 0 -37px;

HTML

<div class='reach'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
    <input class='field' id='s' name='q' placeholder='Ingin mencari sesuatu?' type='text'/>
    <input class='submit' id='searchsubmit' name='submit' type='submit' value='Cari!'/>
</form>
</div>
<div>
<ul id='social'>
<li class='twitter'><a href='http://twitter.com/empayarmasr'>Twitter</a></li>
<li class='rss'><a href='http://busby-btemplates.blogspot.com/feeds/posts/default'>RSS</a></li>
<li class='facebook'><a href='http://www.facebook.com/empayarmasr'>Facebook</a></li>
</ul>
  </div>

我的代码位于＆gt;＆gt;＆gt; JSFiddle

Answer 1

我更新了你的js小提琴我宁愿放right:0;并将其定位为绝对http://jsfiddle.net/yjsbdLdk/2/

Answer 2

删除了原来的答案。我不认为我应该假设你的布局是什么样的，Winresh也不应该假设你可以使用绝对定位。

只需使用clear属性即可。它简单得多。

http://jsfiddle.net/yjsbdLdk/6/

 <div class='reach'>
     // Search form
 </div>
 <div class='clear'></div>
 <ul id='social'>
     // Social list
 </ul>

 .clear{
    clear:right;
 }

如何在一侧制作2个div（向上和向下）

2 个答案: