Question

其中2个应位于同一行，下一个div应位于它们下方，而3个div都位于包装器中间。我的目标是注册并登录，然后在两个下面都有一个搜索框我的HTML是

<div id="wrapper">
     <div id="reglog>
         <a href="#">Register</a>
         <a href="#">Login</a>          
      </div>
      <div id="search">Quick Search</div>
</div> <!--End of wrapper-->.

我的css是

   #wrapper{
            float:right;
            max-width:380px;
            text-align:center             
           }

    #reglog{
            display:inline-block
            }

我希望不给id = search任何样式，它只会落在reglog块之下...... 任何帮助我为什么不能让它工作？

由于的米歇尔

Answer 1

只需使用display:block;代替inline-block。查看下面的更新代码段。

＆＃13;

#wrapper{
  float:right;
  max-width:380px;
  text-align:center             
}
#reglog, #search{
  display:block;
}

＆＃13;

<div id="wrapper">
     <div id="reglog>
         <a href="#">Register</a>
         <a href="#">Login</a>          
      </div>
      <div id="search">Quick Search</div>
</div> <!--End of wrapper-->.

＆＃13;

Answer 2

我建议使用display:flex;并使用flex-direction: row | row-reverse | column | column-reverse;

指定所需的弹性方向

此外，您应该将这些CSS属性附加到包含所有三个div的<div></div>。

您可以在此处找到有关此内容的所有信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何在彼此之下调整div和链接

2 个答案: