Javascript 具有三个div的响应式酒吧

在我的Wordpress儿童主题（Twenty12）中，我创建了一个带有菜单、搜索表单和社交链接菜单的酒吧。在找到解决方案之前，我很难将它们正确对齐。我在css中显示一个表行，然后显示三个单元格（同样在css中）。代码如下所示：

#table-row{
display: table-row;
line-height: 44px;
text-align: right;  
}

#menubar{
display: table-cell;
padding-left: 40px;
}
#search-container {
display: table-cell;
}
#menu-social-wrapper{
display: table-cell;
}

<div id="navigation-container" class="navigation-container">
            <nav id="site-navigation" class="main-navigation" role="navigation">

                <div id="table-row">
                    <div id="menubar">
                        <button class="menu-toggle"><?php _e( '<i class="fa fa-bars"></i>', 'twentytwelve' ); ?></button>
                        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>                    
                    </div>

                    <div id="search-container" class="search-box-wrapper clear">
                        <div id="searchbox" class="search-box clear">
                            <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : endif;?>
                        </div>
                    </div> 

                    <div id="menu-social-wrapper" class="menu-social-wrapper">
                        <?php get_template_part( 'menu', 'social' ); ?>
                    </div>
                </div>    

            </nav><!-- #site-navigation -->
        </div>

标记如下所示：

#table-row{
display: table-row;
line-height: 44px;
text-align: right;  
}

#menubar{
display: table-cell;
padding-left: 40px;
}
#search-container {
display: table-cell;
}
#menu-social-wrapper{
display: table-cell;
}

<div id="navigation-container" class="navigation-container">
            <nav id="site-navigation" class="main-navigation" role="navigation">

                <div id="table-row">
                    <div id="menubar">
                        <button class="menu-toggle"><?php _e( '<i class="fa fa-bars"></i>', 'twentytwelve' ); ?></button>
                        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>                    
                    </div>

                    <div id="search-container" class="search-box-wrapper clear">
                        <div id="searchbox" class="search-box clear">
                            <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : endif;?>
                        </div>
                    </div> 

                    <div id="menu-social-wrapper" class="menu-social-wrapper">
                        <?php get_template_part( 'menu', 'social' ); ?>
                    </div>
                </div>    

            </nav><!-- #site-navigation -->
        </div>

我已经试了几天了，但还没有找到解决办法

请帮帮我。

---

注意：我是一个新手，所以尽可能简单。

我会避免使用表行和表单元格值。页面部分的布局和内容不是表，因此使用display:block或display:inline block更合适。内联块元素可以作为内联内容对齐（文本对齐），您可以为它们指定宽度（例如33%）

---

如果希望窄屏幕在一列中显示div，请使用媒体查询。

一如既往。。。当我发布一个问题时，答案就出来了。就在Awashi发表评论之前，我发现了这一点。事实上，媒体查询是答案的一部分，然后将css从 显示：表格行和

显示：表格单元格

到

显示：块

不得不做一些边缘和填充的工作，但现在看起来很棒

有了这个，另一个问题就要出现了，但我相信我能解决它

---

无论如何，感谢您的评论。

可以随时查看引导源代码。他们在移动第一和反应灵敏方面做得很好。（我已经放弃了与IE/Firefox/Chrome/Opera/Safari等的竞争，寻找框架让我专注于我需要的部分）你的问题是“表行”和“表单元格”。当您希望在列中显示3个div时，您需要使用“媒体查询”更改此选项。对于小屏幕尺寸，您需要使用“媒体查询”将“显示：表格”更改为“显示：区块”。谢谢您的回答。我刚刚解决了这个问题。见上面的答案。