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 に十分なパディングを与えて、まだ拡大および縮小できるようにしますが、脇に十分なスペースを残します。パディングを脇の幅 (この場合は 280px) に等しくする必要があります。

section {
    padding-right: 280px;
}

これらすべての例を jsFiddle に掲載しました: jsfiddle.net/2e9HM/6/

ボーナス: 本当に凝りたい場合max-widthは、#wrapper div を設定して、ページがそのサイズ内で柔軟になるようにすることができます。これを行う場合min-widthは、ウィンドウが完全に縮小されたときに aside が #wrapper の外に出ないように、(aside のサイズに等しい) a も設定してください。

于 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 に答える