html – CSS宽度和列问题_html-js-css

概述我无法看到我在这里做错了什么.我正在使用三列布局的宽度和边距,我想将右侧边栏加宽到左侧的空白区域. 但当我将#sidebar的宽度增加到22％以上时,两个侧边栏都会下降到内容之下.我错过了与组合宽度和边距有关的东西. HTML和CSS位于图像下方.这也是一个响应式结构,如果这有所不同.我需要保留这个CSS和HTML,因为它是一个WordPress主题,我不想进入另一种类型的CSS列或框结构. 更新我无法看到我在这里做错了什么.我正在使用三列布局的宽度和边距,我想将右侧边栏加宽到左侧的空白区域.

但当我将#sIDebar的宽度增加到22％以上时,两个侧边栏都会下降到内容之下.我错过了与组合宽度和边距有关的东西.

HTML和CSS位于图像下方.这也是一个响应式结构,如果这有所不同.我需要保留这个CSS和HTML,因为它是一个wordpress主题,我不想进入另一种类型的CSS列或框结构.

更新10/23/12我放弃了尝试调整当前的CSS和HTML并更改为页面模板的框布局模型CSS,因为框模型运行良好,我也能够简化我的页面模板.

有任何想法吗？

HTML：

<body >    <div ID="page">    <div ID="main">    <div ID="primary">    <div ID="content" role="main">    Lorem ipsum dolor sit amet,consectetur adipiscing elit.Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,quis volutpat diam. Etiam eleifend arcu eu enim tincIDunt ornare. SedimperdIEt viverra bibendum. Proin a enim et turpis tempus mattis vitaeet ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.    </div>    </div>    <div ID="sIDebar-right">    Lorem ipsum dolor sit amet,quis volutpat diam. Etiam eleifend arcu eu enim tincIDunt ornare. SedimperdIEt viverra bibendum. Proin a enim et turpis tempus mattis vitaeet ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.    </div>    <div ID="sIDebar-left">    Lorem ipsum dolor sit amet,quis volutpat diam. Etiam eleifend arcu eu enim tincIDunt ornare. SedimperdIEt viverra bibendum. Proin a enim et turpis tempus mattis vitaeet ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.    </div>    </div>    </div> (some closing divs omitted for clarity).

CSS：

#page {margin: 1em auto;max-wIDth: 1075px;}#main #secondary {float: none;margin: 0 7.6%;wIDth: auto;}.three-column #page {max-wIDth: 1075px;}.three-column #primary {float: left;margin: 0 -26.4% 0 0;wIDth: 100%;}.three-column #content {margin: 0 34% 0 20%;wIDth: 44%;border:1px solID #c2c2c2;padding:10px;}.three-column #sIDebar-right {float: right;margin-right: 1.5%;wIDth: 22%;border:1px solID #c2c2c2;padding:10px;}.three-column #sIDebar-left{position:relative;float: left;wIDth: 15%;margin-left: -72%;border:1px solID #c2c2c2;padding:10px;}

解决方法您的问题是#primary上的-26.4％右边距和#sIDebar-left上的-72％左边距.

我已经调整了那些小提琴;我放弃了左侧边栏(虽然为了填充而保持1.5％),并将#primary的右边距调整为-100％.

http://jsfiddle.net/mstauffer/CtkyN/1/

这仍然是非常糟糕的Hack-y.如果有任何可行的方法,那么你将有更好的经验来重新处理HTML和CSS ..但如果没有,那么这个小提琴将至少允许你在这个现有框架中根据需要重新调整右侧边栏的大小.

更新：我没有可靠的来源,但我可以解释CSS数学.一般来说,你在#primary上使用负边距将其他两个div放在#primary通常占用的区域中.通常,使div重叠的唯一方法是将它们设置为position：fixed或position：absolute.因为那些很难,所以这样的布局通常可以通过三个左浮动(或将来,flexBox)来实现,但是由于HTML的顺序是不可能的.

相反,你被迫说服CSS渲染器#primary不介意被覆盖…你通过设置-100％的负边距来做,基本上说,“在这里,拥有所有这些空间,它是很好,你可以重叠它.“打开空间后,然后使用左右浮动(和宽度收缩)将侧边栏放在#content两侧的空白处.

我希望有所帮助！

总结

以上是内存溢出为你收集整理的html – CSS宽度和列问题全部内容，希望文章能够帮你解决html – CSS宽度和列问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1067523.html