边栏宽度问题

我开始向您展示我的“网站”。边栏宽度问题

My Problem “我的问题”

头将总是与1140px的宽度居中。
主要内容将具有〜70％的宽度和912px的最大宽度。

我的问题是侧边栏不会保持它的正确宽度。

如果你看看“设计”决议中的网站，它看起来是正确的，但如果你让窗口更大，它不会遵循。它应该始终保持，因此边栏内容始终位于标题左边缘的“内部”。

我将如何实现这一目标？
侧边栏的宽度为〜23％，如果将窗口保持在1300像素宽（这是设计的宽度），它看起来很正确。

来源

2013-10-09 Daniel

这将是更容易帮助你，如果你提供你的HTML/CSS代码，最好在[小提琴]（http://jsfiddle.net/）格式 – Stellaire

它看起来像这样：http://jsfiddle.net/gx4jb/20/ 不能做它exac因为它导致divs消失。侧边栏是绝对定位的，主div有空白边缘，所以它始终处于正确的播放状态（与标题右边缘内联）。 – Daniel

如果我正确理解您的要求，我不认为有可能创建一个响应式布局。如果中心标题可以小于1140像素，而主内容和侧边栏设置为具有百分比宽度，那么始终有可能侧边栏+主内容比标题宽，因此侧边栏的左侧将会总是在标题的左边缘“外”。 – Stellaire

根据您所述的要求，标题的最小宽度为1140px，因此我的“解决方案”基于该数字。为了获得全面的响应，这实际上应该是使用％和媒体查询。

通过使用一些额外的包装，我想我们可以管理你以后的东西。

**基本HTML **

<header> 
    <div class="inner"> 
    THIS IS MY HEADER AREA 
    </div> 
</header> 

<div class="nav"> 
    <div class="inner"> 
    THIS IS MY NAV BAR 
</div> 
</div> 

    <aside> 
    ASIDE 
    </aside> 

<div class="inner clearfix"> 

    <div class="content"> 
    CONTENT 
    </div> 
</div>

** ** CSS（包括一些颜色，所以你可以看到ahat正在发生的事情。

* { 
    box-sizing:border-box; 
    margin:0; 
    padding:0; 
} 

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

html { 
    text-align:center; 
    font-weight: bold; 
} 

header { 
    height:50px; 
    line-height:50px; 
    background:lightgreen; 
} 

.inner { 
    width:1140px; 
    margin:0 auto; 
    position:relative; 
    } 

header .inner { 
    background:lightblue; 
} 

.nav { 
    height:50px; 
    background:pink; 
    line-height:50px; 
} 

.nav .inner { 
    background:NavajoWhite; 
} 



aside { 
    width:20%; 
    min-width:218px; 
    height:400px; 
    background:blue; 
    margin-top:10px; 
    position:absolute; 
    left:10px; 

} 

.content{ 
    height:450px; 
    background-color: orange; 
    width:70%; 
    float:right; 
    max-width:912px; 
    margin-top:10px; 
}

Codepen Example

来源

2013-10-09 11:33:20

问题是，该网站的最大宽度为1140.所以标题永远不会大于1140，但它可以变小。主要内容不能大于912px，但可以变小。所以问题在于侧边栏停留在左侧，并在侧边栏和主div之间留下很大差距。 – Daniel

好的，那么你肯定会需要一些媒体查询来改变'.content' div的％宽度。目前，只需将'.inner' div的宽度更改为1140的最大宽度，就可以使页面非常灵敏。 http://codepen.io/Paulie-D/pen/Aghba你想要这样做有多小？ –

边栏宽度问题

回答

相关问题