将两个元件并排对齐并迫使它们保持水平

Question

CSS - Floating two elements side by side

此对话类似于我想要实现的目标。我有一个基于％的布局，并且有一个问题，菜单会混入内容，或者当页面缩小或在手机上查看时，内容将落在菜单下方。我已经花了几个小时在这上面，无法弄清楚我做错了什么。

问题孩子：https://www.tendercare-inc.com/new/

更新： 我最重要的是获得了一些适用于Word Press的东西，因为它使用非常笨拙的控件和元素名称。我尝试从_Underscores开始，但它似乎并没有像我想象的那样有所帮助。

Answer 1

你应该使用bootstrap（getbootstrap.com）你可以使用col-md-6 clases来做到这一点。还支持手机和平板电脑调整

Answer 2

基本问题是，您为menu-sidebar和main-content等某些元素指定了基于百分比的布局，但您并不一致。菜单的min-width为200px。当200px大于15％时，你想要发生什么？在菜单中，您还可以使用精确的像素宽度指定元素 - 各种cssmenu制造商元素。

网站非常简单 - 基本上是页眉，页脚，侧边菜单和正文。然而，您有两个样式表 - 一个包含超过800行 - 以及一个site-content包含content-area的结构包含site-main，其中包含content-container。难怪它会让你感到悲伤。我的建议是重新开始使用一个简单的css框架（比如@jaun上面提到的bootstrap。保持html的结构尽可能简单，并避免使用菜单之类的东西进行复制粘贴设计。而不是尝试看看什么＆ ＃39;错了，在各种屏幕尺寸下描述你想要的行为并实现它。