0

我搜索了论坛，但无法得到问题的确切答案。我想在http://techtites.com/上调整我的博客布局，以使内容区域的宽度灵活，当浏览器改变宽度时调整宽度而不将侧边栏推到底部。

它目前是一个固定宽度的布局。

我玩过的主要风格是：

#wrapper {
width:960px;
margin:0 auto;
}

#content {
padding:25px 0;
}

section {
float:left;
width:660px;
margin-right:20px;
}

aside {
float:left;
width:280px;
}

我想让截面宽度是动态的，同时保留一边坐在窗口的右侧。

4

5 回答 5

2

使用定位。将您的#wrapper div 设置为此将相对于它而不是浏览器窗口position: relative;定位该div 的所有子元素。

现在将你放在#wrapper div的左上角

aside {
    width: 280px;
    position: absolute;
    right: 0;
    top: 0;
}

最后，为部分 div 提供足够的填充，以便它仍然可以扩展和收缩，但它为旁边留下了足够的空间。您希望填充等于侧面的宽度（在本例中为 280 像素）。

section {
    padding-right: 280px;
}

我在 jsFiddle 上举了一个例子：jsfiddle.net/2e9HM/6/

奖励：如果你真的想变得花哨，你可以设置max-width你的#wrapper div，这样页面在那个大小内是灵活的。如果您这样做，请确保您也设置了 a min-width（等于您的侧边的大小），以便在窗口一直缩小时侧边不会落在 #wrapper 之外。

于 2013-03-21T13:19:38.493 回答
2

Morphius 解决方案是迄今为止最好的 - 例如，请参阅 http://codepen.io/anon/pen/wBBdgg

.blbx { 
background:blue;
 width: calc(100% - 100px);
  height:50px;
  display:inline-block;
  vertical-align:top;
  text-align:center;
  
  
   
}

.rdbx { 
background:red;
 display:inline-block;
   height:50px;
   width: 100px;
  vertical-align:top;
 
}

.surround {
	
  width: 100%;
   height:50px;
  
}

.myimg { max-width:100%;
  max-height:100%;
}
<div class='surround'>
  <div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
  </div><div class="rdbx"></div></div>

于 2014-11-19T19:01:49.580 回答
1

将您的样式更改为此

section {
    float:left;
    width:100%;
    margin-right: -280px;
}

aside {
    float:left;
    width:280px;
}

活生生的例子

于 2013-03-21T11:52:30.487 回答
0

也许这会做：

section {
    float:left;
    width:100%;
    padding-right:250px;
    height:100px;
}

aside {
    float: left;
    width: 250px;
    min-height: 100%;
}
于 2016-03-31T08:58:40.083 回答
-1 
section {
    float:left;
    width:660px;
    margin-right:20px;
    height:100px;
}

aside {
    height:100px;
    margin-left: 670px;
}

现场演示

于 2013-03-21T12:13:35.100 回答