为什么我的网格侧边栏不能在我的主区域旁边显示内容？
网格侧边栏不能在主区域旁边显示内容的原因可能有多种，以下是一些可能的原因和解决方法：
- 布局问题：检查网格布局的定义和样式，确保侧边栏和主区域的网格项正确设置了位置和大小。可以使用CSS的grid属性来定义网格布局，确保侧边栏和主区域的网格项在正确的位置。
- CSS样式冲突：检查侧边栏和主区域的CSS样式，确保它们之间没有冲突或重叠的样式。可以使用浏览器的开发者工具检查元素的样式，并逐个排除可能引起冲突的样式。
- JavaScript错误：如果侧边栏的显示和隐藏是通过JavaScript控制的，检查JavaScript代码是否正确，并确保没有错误导致侧边栏无法显示在主区域旁边。可以使用浏览器的开发者工具检查JavaScript控制的逻辑和错误信息。
- 响应式设计问题：如果网页是响应式设计的，可能是因为屏幕尺寸或设备类型的变化导致侧边栏无法显示在主区域旁边。可以检查响应式设计的CSS媒体查询和JavaScript逻辑，确保侧边栏在不同设备上都能正确显示。
- 其他因素：还有其他可能的因素导致侧边栏无法显示在主区域旁边，例如浏览器兼容性问题、缺少必要的HTML结构或标签等。可以仔细检查网页的HTML结构和相关代码，确保没有遗漏或错误。
总之，要解决网格侧边栏不能在主区域旁边显示内容的问题，需要仔细检查布局、样式、JavaScript代码和响应式设计等方面的可能问题，并逐个排除。如果问题仍然存在，可以考虑寻求专业的前端开发人员的帮助。
相关·内容
6回答
HTML页面上不需要的空白区域
html、css
我已经创建了一个使用CSS从零开始的网站。
随机地，在两个地方有不需要的空白：
在主内容区域的上方(在菜单栏下面)。
在主内容区域和侧边栏下面，在页脚上方。
我尝试过各种方法来解决这个问题，比如边距和垫子，但它们似乎不起作用。
我能做些什么来摆脱这些白区呢？
浏览 12提问于2011-02-23得票数 2
回答已采纳
2回答
IE6/7中的CSS问题
css、wordpress、internet-explorer-7、internet-explorer-6
我已经创建了一个，目前正在尝试在IE 6/7中调试该站点。我怀疑问题出在hasLayout，因为这似乎很常见，症状也是一致的，但是我已经检查了许多损坏的元素，并将hasLayout属性添加到那些还没有升级的元素中。
我确实在几个CSS类中设置了z-index，现在我已经删除了它们，我想知道你们中是否有人对其他调试方法有其他建议。
网址是：
我在这里发帖，而不是Wordpress论坛，因为我认为我的问题更多地与标准CSS问题有关，而不是任何特定于WP的问题。
编辑：
详细介绍我在IE6/7中遇到的错误：
标题是一个具有css背景属性的锚点，它向下按下搜索框，导致很大的间隙。
nav的显示就像它下
浏览 0提问于2011-06-14得票数 0
2回答
2列问题高度100%
html、css、responsive-design
我试图使2列(侧栏)的SMF论坛软件的响应主题。我想在右边放一列，它会100%地扩展它的父级的高度。
仅供参考，我刚刚开始将默认主题转换为响应式主题。
通常，我不会遇到这些问题，或者响应式设计。然而，我弄不明白为什么侧边栏的高度总是与标题的高度相匹配。
侧边栏HTML在标题HTML之外，在标题HTML之前。然而，当你给侧边栏一个固定的宽度，比如400px的via inspect元素，它也会扩展头部的高度。我对此感到困惑，因为在代码端它似乎没有意义。
我想如果我有另一双眼睛，就会有人帮我解决这个问题。
谢谢。
浏览 2提问于2012-12-04得票数 0
回答已采纳
5回答
使用CSS的等高列和页脚？
html、css
我正在创建一个业务应用程序，它有一个宽度可变的侧边栏和内容区域，以及一个页脚。对于我来说，我不知道如何使用CSS让页脚始终正确显示，而不管侧边栏的高度如何。下面是这个问题的一个例子：
如果内容区域大于侧边栏，则页脚和侧边栏很好用，但反之亦然( 技术似乎不适用于页脚，而技术似乎只有在边栏较短时才有效)。
有什么建议吗？我在这里找到了一个答案，它只适用于IE6，而不适用于CSS。我很想让我的生活变得简单，并使用表格，但无论哪种方式，我都很想知道如何使用CSS (一点javascript不会有什么坏处，但w/o更好)。
浏览 3提问于2009-07-02得票数 1
回答已采纳
2回答
div display，css @media vs javascript
javascript、css、responsive-design
对于我的第一个响应设计，我使用css @media和display: none；或display:table-cell来显示或隐藏侧栏。这很好，我需要显示:三个div布局的表格单元格。
CSS示例：
#div_right { display: table-cell; }
@media screen and (max-width: 700px) { #div_right {display: none; } }
JS是标准的ToogleDisplay函数( e.style.display = "table-cell"；代替e.style.display =“块”；)
在小窗口/屏幕
浏览 7提问于2014-10-23得票数 0
回答已采纳
1回答
LARAVEL-8，引导-5。我使用外部CSS文件作为头和侧栏的主布局，当i@扩展时，内容格式被扭曲了。
html、css、laravel-8、laravel-blade、bootstrap-5
头和侧栏的主布局CSS文件：
<link href="{{ asset('app.css') }}" rel="stylesheet">
*注意:外部app.css文件在公共线路上
内容:主页
<link rel="stylesheet" type="text/css" href="/TRform.css">
*注:这是内容的CSS
对于content.blade.php文件，我的代码：
@extends('Layout')
@section('co
浏览 5提问于2022-02-16得票数 0
1回答
wordpress边栏显示在错误的位置
php、css、wordpress
我觉得问这个问题有点像个笨蛋，但我在这个问题上被难住了大约两天。在一个我试图组合在一起的网站上，，我想放在主要内容区域右侧的侧边栏，正显示在底部。我尝试过调整最大宽度、css对齐、css显示以及其他一些东西。我已经让侧边栏移动了一点，但仅此而已。我很确定问题是主内容被固定到一定的宽度，并且它应该是灵活的，当侧边栏被调用时，但这就是没有发生。有什么想法吗？我真的很感谢你的帮助。
浏览 0提问于2014-02-23得票数 0
3回答
引导固定侧边栏导致主要内容重叠。
html、css、twitter-bootstrap
我是一个新手，当谈到引导和css在一般情况下。我想要一个固定的侧边栏，固定顶部导航和主要内容卷轴的网站。
肚脐是固定的，工作正常。侧边栏的布局和主要内容也很好。当我将侧边栏设置为固定的时候，问题就来了。主要内容与侧边栏重叠。
我使用的是基本的网格布局：
<div class="container">
<div class="col-md-3 affix">
sidebar is here
</div>
<div class="col-md-9">
浏览 2提问于2015-11-28得票数 0
2回答
我有一个图片网格，可以自己很好地显示，但是我不能将这个网格放置在侧边栏旁边。
要构建网格，我将图片放置在<ul>中，并设置<li> display: inline-block的属性。
当试图将此网格合并到侧栏div旁边时，它不会放在侧栏的一侧，而是放在侧栏下面。放短信做我想做的事。现在，当我省略display和float在<li>上时，图片显示在正确的位置(侧边栏旁边)，但是我希望图片显示在一个网格中，而不是一个列。
这是我的CSS
ul.cats li {
width: 200px;
display: inline-block;
浏览 0提问于2014-07-08得票数 0
回答已采纳
2回答
填充物显示不正确
html、css
我正在测试我的CSS，并试图使网站响应一个小屏幕大小。
唯一的问题是，我不能让填充物工作在旁边的元素。若要重现此问题，请调整浏览器窗口的大小，直到侧边栏停止向右浮动(一旦屏幕大小低于600 To的宽度，此值将出现在底部。
现在所有的css都是内联的，以查看CSS。与调整大小有关的部分从以下位置开始：
@media screen and (max-width: 600px) {
编辑:此图像显示紫色的填充(通过Firebug)没有正确显示：
浏览 0提问于2011-10-28得票数 2
回答已采纳
1回答
固定的，全高度侧边栏(变宽/位置)
javascript、html、css
Javascript是实现可变宽度/位置的全高度边栏(主要内容通过调整自己的宽度来响应)的唯一方法吗？
我一直在努力实现的是有一个固定的，完全高度的侧边栏从侧面滑入，并有其主要内容，其右响应调整其宽度。我希望只使用css实现这一点，而不使用js或百分比宽度。
我知道我可以实现一个固定的边栏的可变宽度，但它需要js来调整主要内容区域的边距属性。理想情况下，我可以使用侧边栏的x位置显示/隐藏和主要内容，在它旁边，自动调整。
有什么想法？提前谢谢。
编辑
当前的css实现不支持完全高度。
<!--HTML-->
<div id="container">
浏览 0提问于2013-10-05得票数 0
2回答
在响应性CSS和HTML网站中按下侧边栏
html、css
当浏览器达到一定大小时，是否有一种方法可以使侧边栏折叠到页面底部而不需要任何JavaScript。
我正在创建一个响应性的主题，可以在上看到。通过将浏览器窗口调整到600 it以下，主题将进入线性版本(只需调整浏览器的大小，直到其更改为此)。
在顶部，侧边栏变成一个完整的菜单，这是我想进入底部而不是停留在顶部的部分。
CSS代码的相关部分是@media屏幕和(最大宽度:600 in )，它告诉浏览器在浏览器小于600 in时使用指定的CSS，边栏使用名为HTML5的元素，并且每个帖子都包装在里面。
浏览 5提问于2011-09-24得票数 0
1回答
CSS网格与Drupal
8、theming
我喜欢新的CSS特性，但我遇到了一个限制，即响应性的布局以及Drupal如何将事情阻止在一起。为了简单地解释一个用例，我有一个正确的侧边栏，它分为两个组件，一个搜索表单和一个广告。在平板电脑和桌面上，这些应该堆放在同一个侧边栏中。但在手机上，我想打破搜索表单组件，把它放在内容之上。我把线框示例放在一起，展示了事物是如何移动的。但是，当我开始在Drupal (8)中将其与块、区域放在我的自定义主题中(我作为一个高级主题的子主题)时，Drupal将它们组织成嵌套的HTML和其他元素(次要，主，标题等)。所以问题是，我是放弃了基本的主题化，让事情变得非常平坦，就像在线框示例中一样，还是有办法将子元素
浏览 0提问于2018-03-06得票数 1
回答已采纳
4回答
在运行时加载css
javascript、html、css
我正在创建一个基于web的应用程序，它将在计算机和手持设备上运行。
我正在写两个css文件，一个用于pc，另一个用于手持设备。
在onload事件中，我调用了一个外部javascript，我已经编写了基于用户代理动态加载css的代码。
当我在google chrome开发人员选项上运行我的应用程序以审计页面时，它显示避免从javascript加载css。请告诉我这种方法在性能方面是否正确，或者是否有其他解决方案。
浏览 0提问于2012-11-23得票数 0
3回答
做一个固定的和响应性的div
html、css、twitter-bootstrap
我有这个设计，用引导，有一个左侧的酒吧100%的高度。左边有一个内容区域。左边的侧边栏是固定的使用位置:固定的，所以它保持不变时，滚动下来。在台式机上没问题。
然而，当它是从移动观看，固定的侧边栏去顶部，就像在任何其他响应设计。很好。但是桌面右侧的内容区域出现在侧边栏的顶部，而不是底部，导致位置:固定。
我怎么才能修好它？将侧边栏固定在桌面上，并使其在移动上响应？
抱歉，我在手机上
html
<div class='col-md-3' id='sidebar'>Sidebar</div>
<div class='col-md
浏览 2提问于2013-12-17得票数 2
回答已采纳
1回答
浮动vs绝对定位难题
jquery、css、css-float、css-position
我最近在上询问如何将侧边栏的高度设置为等于此上的容器。
基本上，我有两个侧边栏，其中一个包含一个手风琴。当你点击某些按钮(在本例中是"Services“按钮)时，手风琴就会打开并导致侧边栏的增长。这就是我想要的，然而，侧边栏的高度不会粘在容器的底部。
为了解决这个问题，我通常会将侧边栏绝对定位在容器的顶部和底部。这样做的问题是，当accordion展开(单击时)时，它将重叠在侧边栏的底部。
我需要一个解决方案，随着他手风琴的增长，侧边栏将与它一起增长。解决方案还必须让侧边栏等于容器的完整高度。欢迎使用纯CSS或Jquery！
浏览 1提问于2011-01-06得票数 0
1回答
如果已在JS中操作过CSS属性，则媒体查询不再更新这些属性
javascript、css、html、media-queries
我正在使用浮动元素和负边距设置响应式布局。
调整浏览器的大小一切都很顺利:桌面的内容+左右侧边栏，平板电脑的内容和右侧侧边栏，手机的左侧和右侧侧边栏。
我使用JavaScript来改变负边距，例如，当按钮被单击时，将左侧边栏带到画布上，并在再次单击时将其移回画布上，回到其原始位置(在调试中得到确认)。
但是，现在我已经用JavaScript操作了页边距，现在调整浏览器的大小破坏了布局，因为当我超过媒体查询阈值时，我用JavaScript更新的属性不再更新。
媒体查询仍在“工作”--例如，菜单按钮的显示如媒体查询中所建立的那样切换开和关。
我需要做什么才能“刷新”我的媒体查询，以便它们使用Jav
浏览 2提问于2013-05-23得票数 1
回答已采纳
2回答
流体网格布局控件
css、wordpress、responsive-design、fluid-layout
很抱歉问这个问题，因为我讨厌问问题，但有时这是最后的办法。
我在这里费尽心机，我在周末已经读了几百页，就是想不通该如何做到这一点。
我想有一个简单的4列‘主页’的桌面和ipad的登录页面(子页面将恢复为2列-内容和侧边栏)。当用户继续访问iPhone时，我希望用户看到2列。
我已经设法让iphone使用网格系统显示4列的缩小版，或者我设法让它显示1列，但这两种方法都没有帮助。
我已经附上了我正在努力实现的图像，如果它有帮助，但我会非常感谢，如果有人谁在这个领域有一些经验，指出我在正确的方向，因为我就是无法弄清楚它。
我正在使用wordpress开发，并尝试了bootstrap，响应式主题和骨骼
浏览 1提问于2013-05-28得票数 0
回答已采纳
2回答
响应式站点不能在线工作，但在本地计算机上保存并打开它时可以工作。为什么？
html、css、responsive-design、responsiveness
第一次在这里提问，希望我来对地方了。
下面是我正在工作的一个网站：
我刚刚为它构建并测试了一个移动友好的主题，但我发现‘响应式’不能正常工作。
在打开该页面时，如果您将浏览器的大小调整为更小(作为移动视图)，则根本不起作用。左边的侧边栏仍然在相同的位置，而不是重新定位到页面主要内容的上方。但是，这真的很奇怪，如果你将这个页面保存在本地计算机上，并用相同的浏览器打开保存的页面，调整浏览器的大小，响应就会正常工作。
保存的代码应该与“在线”的代码相同，对吗？为什么在线one的响应性不起作用？
任何想法和帮助都将不胜感激！谢谢。西蒙。
浏览 1提问于2015-08-23得票数 0
2回答
Fluid Grid -如何在响应式Web设计中使用它们？
css、grid、responsive-design、media-queries、fluid
请原谅，但是谁能给我解释一下流体网格的用途，比如cssgrid。关于网格，我指的是那些列，有些是9列，有些是12列，其他是24列……
1)。网格是否用作背景或模板，以便正确调整DIVS的大小和位置？
2)。在设计响应式网站时，是否必须使用fluid网格(9、12、24列)，或者我是否可以只使用CSS3和媒体查询来定义断点？
3)。例如，列数之间有什么区别，为什么我要使用9列，而不是24列。内容越多，列数越高？
4)。为什么有这么多流体网格生成器可用？是因为每一个都更好，还是在某些方面有所不同？
谢谢
浏览 1提问于2013-03-25得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
