CSS宽度和列问题

我看不到我在这里做错了什么。我正在处理三列布局的宽度和边距，我想将右侧边栏加宽到左侧的空白处。CSS宽度和列问题

但是，当我增加＃侧栏的宽度 - 右侧22％以上时，两个侧栏下降到内容下方。我错过了一些与宽度和边距相结合的事情。

HTML和CSS低于图像。这也是一个有反应的结构，如果这有所作为。我需要继续使用这个CSS和HTML，因为它是一个WordPress主题，我不想移入另一种类型的CSS列或框结构。

更新12年10月23日我放弃了努力适应目前的CSS和HTML，并改为盒模型布局CSS的网页模板，因为盒模型效果很好，我能够简化我的页面模板也是。

任何想法？

enter image description here

HTML：

<body class="three-column"> 

    <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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    </div> 

    <div id="sidebar-right"> 

    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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 

    <div id="sidebar-left"> 

    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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et 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; 
}

来源

2012-10-14 markratledge

Flexbox的应该解决的问题。 http://css-tricks.com/old-flexbox-and-new-flexbox/ –

您是否尝试过边框框大小调整？它应该完美地工作，并使其每列都包含填充，边距等等，即指定的宽度。您还应该尝试为中心列定义宽度。 –

您的保证金属性值中的连字符对我来说是新的。他们在做什么？ –

你的问题是#primary的-26.4％，右边距和-72％左边界在＃侧栏左侧。

我已经调整了那些小提琴;我放弃了侧边栏左边缘（但为了填充而保留了1.5％），并将＃小学的右边距调整为-100％。

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

这仍然是相当不错的劈-Y。如果有什么办法，你可以有更好的经验来重新处理HTML和CSS ..但是如果没有，那么这个小提琴至少可以让你在这个现有的框架内重新调整右侧边栏的大小。

更新：我没有可靠的消息来源，但我可以解释的CSS数学。一般来说，你在#primary上使用负边距来放置#primary通常占据的区域中的其他两个div。通常情况下，唯一的方法是将div设置为position: fixed或position: absolute。因为这些都很难，像这样的布局通常可以通过三个左浮动块（或将来的flexbox）来完成，但是由于HTML的顺序是不可能的。

相反，你不得不说服CSS渲染器#primary不介意被过度奠定了...你通过设置-100％的负利润，本质上说，“在这里做，都这个空间，你可以重叠它。“打开空间后，使用左右浮动（和宽度缩小）将侧边栏放置在#content任一侧的空白处。

我希望有帮助！

来源

2012-10-16 20:56:42

谢谢，这非常有效，我应该用小提琴开始（我一直在使用它们的JavaScript）。我一直在使用CSS，因为它是一个Wordpress主题，我适应了两个侧边栏，即使它很古怪。现在，对于你的mods，唯一不起作用的是当浏览器缩小到750px以下时，内容覆盖了右边栏。有没有办法让中间内容分区响应？没有什么大不了的，但750px对于手机来说太宽了。 – markratledge

有没有一些例子可以回应这样的三列而没有古怪的负边限等？也许我应该从头开始。 – markratledge

当然，我现在正在处理一个。 –

编辑：

我做了三列布局，可能会为你工作。

HTML

<body class="three-column"> 
    <div id="page"> 
     <div id="main"> 
      <div id="primary"> 
       <div id="container"> 
        <div id="sidebar-left"> 
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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 
        </div> 

        <div id="content"> 
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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 
        </div> 

        <div id="sidebar-right"> 
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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

CSS

#container { 
    text-align: left; 
    margin: 0px auto; 
    padding: 0px; 
    border:0; 
    width: 80%; 
} 

#sidebar-left { 
    float: left; 
    width: 30%; 
    min-height: 300px; 
    background-color: #cccccc; 
} 

#sidebar-right { 
    float: left; 
    width: 25%; 
    min-height: 300px; 
    background-color: #cccccc; 
} 

#content { 
    float: left; 
    width: 30%; 
    min-height: 300px; 
    background-color: #999999; 
}

我也注意到，具有用于布局的边界会造成问题。可能会添加以下内容将有助于保持div内的边界。

-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box;

See this article。

希望这会有所帮助。

来源

2012-10-17 06:31:41

这不起作用。 – markratledge

我编辑了答案。请再试一次。 –

我认为这个问题是具体位置：

.three-column #content { 
margin: 0 34% 0 20%; 
}

保证金：右上左下;

所以你必须减少右边距，让右边栏扩大。
不要试一试。你最好测试一下。

来源

2012-10-18 04:55:40

这不起作用。 – markratledge

使用此代码： -

HTML

<body class="three-column"> 

    <div id="page"> 
    <div id="main"> 
    <div id="primary"> 
    <div id="sidebar-left"> 

    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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    <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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    </div> 

    <div id="sidebar-right"> 

    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. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et 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 #sidebar-left{ 
position:relative; 
float: left; 
width: 15%; 
} 

.three-column #content { 
margin: 0 34% 0 20%; 
width: 44%; 
border:1px solid #c2c2c2; 
padding:10px; 
float: left; 
} 

.three-column #sidebar-right { 
float: left; 
margin-right: 1.5%; 
width: 22%; 
border:1px solid #c2c2c2; 
padding:10px; 
}

来源

2012-10-18 10:56:46 suiz

这不起作用。 – markratledge

它很容易其实你很接近你忘了填充，增加的宽度你的内容，所以如果你有3个div，20％宽度和10％保证金& 10％填充在每一边你会得到超越你必须移动的100％。

工作的jsfiddle here

来源

2012-10-18 14:53:33

其他人已经给你解释。我只是想添加视觉表示，以便更容易看到问题。 The problem area

来源

2012-10-18 16:55:17 mehulved

.three-column #content DIV是中间的内容也需要有保证金向左DIV宽+ padding和margin权#sidebar-right DIV宽+填充，无需固定宽度，中间的内容。

检查sample和code。

来源

2012-10-19 05:45:01 sureshunivers

编辑：我没有看到你必须留在同一CSS的评论。可能除了你现在拥有的东西外，还可以使用它，但是如果不是，请不要理会。

如果您使用行流体和div跨度，您可以缩放它们而不会产生很多问题。 CSS是在提琴手。

http://jsfiddle.net/GeyHC/1/

<div class="row-fluid"> 
    <div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;"> 

     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. Sed 
     imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
     et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 

    <div class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;"> 

     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. Sed 
     imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
     et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 

    <div class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;"> 

     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. Sed 
     imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
     et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
</div>

来源

2012-10-19 18:19:51 zmanc

CSS宽度和列问题

回答

相关问题