Question

我在论坛上搜索过但无法得到问题的确切答案。我想在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;
}

我想让部分宽度变为动态，同时保留放在位于窗口右侧。

Answer 1

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

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

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

最后，为div部分提供足够的填充，以便它仍然可以展开和收缩，但它留下了足够的空间。您希望填充等于旁边的宽度（在这种情况下为280px）。

section {
    padding-right: 280px;
}

我在jsFiddle上提出了所有这些的例子：jsfiddle.net/2e9HM/6/

奖励：如果您真的想要获得幻想，可以设置#wrapper div的max-width，以便页面在该大小范围内灵活变通。如果这样做，请确保设置min-width（等于你的旁边的大小），这样当窗口一直缩小时，旁边不会落在#wrapper之外。< / p>

Answer 2

将您的样式更改为

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

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

Live example

Answer 3

到目前为止，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>

Answer 4

也许会这样：

ppoll()

Answer 5

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

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

live demo

可变内容宽度固定侧边栏宽度布局

5 个答案: