CSS：余白を使ってdivコンテナを調整する

私は、2つの白いサイドバーウィジェット、灰色の記事ボックス、およびいくつかの色付きのボタンでウェブサイトを作成しました。現在、ウィジェットやサークル項目が#mw-panelためのCSS属性left:175px;を使用して位置を取得、その間#right-navigation li aはright: 30em;を使用して配置されます。CSS：余白を使ってdivコンテナを調整する

残念ながら、これは私の特定の1080p画面で最もよく見えます。ブラウザウィンドウのサイズが変更されると、ウィジェットとボタンアイテムがメイン記事と重なり始める。

私はleft: 175px;をmargin-right: 20px;に変えようとしました。そのため、ウィジェットは記事間で20pxの一定距離を保ちます。これを試した後、私の白いウィジェットは私のブラウザウィンドウの左端に置かれました。私は表示を変更しようとしました：絶対;何かに、しかし私は不合理だった。

私は絵と同じ結果を得るために自分のコードに変更するものはありますか？

#right-navigation li a { 
 
font-size: 14px; 
 
color: white; 
 
text-shadow: 4px 4px 15px #000; 
 
display: block; 
 
padding-left: 60px; 
 
opacity: 0; 
 
-webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2); 
 
transition: all .4s cubic-bezier(.4, 0, .2, 2); 
 
    width: 250px; 
 
} 
 

 
#right-navigation li, #right-navigation li:after { 
 
    -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1); 
 
    transition: all .2s cubic-bezier(.4, 0, .2, 1); 
 
} 
 

 
#right-navigation li:after { 
 
content:''; 
 
width: 10px; 
 
height: 10px; 
 
border-radius: 50%; 
 
left: 20px; 
 
top: 20px; 
 
} 
 

 

 
#right-navigation li:hover:after { 
 
width: 50px; 
 
height: 50px; 
 
left: 0; 
 
top: 0; 
 
} 
 

 
#right-navigation li:hover > li { 
 
transform: rotate(90deg); 
 
} 
 

 
#right-navigation li:hover a { 
 
    opacity: 1; 
 
    padding-left: 75px; 
 
} 
 

 
#right-navigation li{ 
 
border-radius: 50%; 
 
margin-top: 10px; 
 
width: 50px; 
 
height: 50px; 
 
box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22); 
 
transition: 0.2s opacity; 
 
} 
 

 
#left-navigation { 
 
position: absolute; 
 
} 
 

 
#right-navigation{ 
 
position:absolute; 
 
right: 30em; 
 
top: 250px; 
 
} 
 

 
.content .entry { 
 
    background-color: #6b6b6b; 
 
} 
 

 
#mw-panel,#p-personal { 
 
padding: 1em; 
 
background: #fff; 
 
border-radius: 10px; 
 
position: absolute; 
 
left: 175px; 
 
width: 240px; 
 
} 
 

 
#ca-view{ 
 
top: 120px; 
 
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABi0lEQVRIS+3VvUuWYRQG8J99URZBo4MkNAgOhlBLlNoQFDhLCtIf0KJEYkRkH2RSCA3SILa2C4KDUhYEgUNDEARODkJTBJEffXHkvPFgr74avIt5TzfPfd33dc55znWdGlVeNVV+384kaEI76rGEd5jG13XlPIILOIlaLOAF3hdxxRI1YxRnE/ADe1gr4xc8xoP8dhPXECSxArs3929wNQP78w8aMZeAYTzHfEbWhgG0Yhz7cAWzeIhX+IYT6EZ/BnUKH0oZ3Mjo4pHXZTorMpnC+bw8g0v4WQZ7Lklv4X6JYBC38/JGnVvCxPndxJfDxptBfAeD/0qwdnkTDf3aJfiPS9SBPrTgWFrFR0zgIK5n5zxJRV9EQ4rvE95iBC836qIVLCYgvOUwTuMMlnEoCVZTM6Hi8KpQchCFNx3NYP7SwWX0pmLXt/hx3EMPoscjgyFE1MUVNtKJRxgrCq0Lk2lqm82gsJTPeFphUNWllTwrKTmYv29huu0vlKgS/ABWduZEq5T6ts6rXqLfh2hoGXiHSEYAAAAASUVORK5CYII=') no-repeat center,radial-gradient(#00FFFF, #00878E);} 
 

 
#ca-ve-edit{ 
 
top: 180px; 
 
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABMklEQVQ4T53USytFURgG4IeBOz+GUiISUQYmLhGSKPlDp0SSlCQJuY0MlZl/Yqbc+7SPdqd9Oees6Vr72d+7vrVWi+ZHKypYxiqug2pp0gtsHxvJ9+9YwFWzYD+e0JYqKND5RsE+DOARszirQV8bAQN7QFT3Fy8DrdQL9ibYUO2epdA7zNUD9uAewzUN/G8ExvCMtzIwsPjzSM5pCHQQL9X5IrAbtxgtOFq72MFPGdiVYBElb+xhO43lHexO3GC8ADvAVi2WBQYWV2iiADvEJr6z1qT3sCPBJguwo+S6ZWLpCgO7xFQBdoz1vMrSTWlPsOkC7ARr+Cp7TCJyNGCmYOEpVurBqpH/z1AGGpc/3rvSytKR88BzLOGzLGZ6PiJngRdYbBTLixzdjufpo5HKqmt/AYr2Pul4ZEE5AAAAAElFTkSuQmCC') no-repeat center, radial-gradient(yellow, #BD9D01); 
 
} 
 

 
#ca-edit,#ca-viewsource{ 
 
top: 240px; 
 
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAtklEQVRIS92VwQ3CMAxFXyeBURgFJilMAqMwCmxSWYqlUuzEapJWai+92P/Z34kz0PkbOutzfMAZ+BRszMbkLLonYf17nGycB5CkEXgAEYAbawFUXCq+Aa+CRVfgmWL+CloC5uKR6pXt5s0BUXEZ6hs4AV/gkg6Cma+AWnG3EwG0EjchUYBnizX/n4IjFq0WF3dKQ64Sl/Y2PabWkJpftCUkctmya2W3ZaeddF3XTV7T4z+Z1TZNfeFJGe4QW0kAAAAASUVORK5CYII=') no-repeat center, radial-gradient(orange, #B75D00); 
 
} 
 

 
.site-inner, 
 
.wrap{margin:0 auto;max-width:1200px;} 
 

 
.site-inner{clear:both;padding-top:40px;} 
 

 

 
body { 
 
    background-image: linear-gradient(#434343, #282828); 
 
    color: #555; 
 
    font-family: Open Sans, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0; 
 
}

<body class="full-width-content"> 
 

 
    <link rel="stylesheet" id="child-theme-css" href="https://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" media="all"> 
 
    <div id="mw-panel"> 
 

 
    <div class="portal" role="navigation" id='p-navigation' aria-labelledby='p-navigation-label'> 
 
     <h3 id='p-navigation-label'>Box1</h3> 
 
     TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
 
    </div> 
 
    </div> 
 

 
    <div class="site-inner"> 
 
    <div class="content-sidebar-wrap"> 
 

 
     <main class="content"> 
 
     <article id="content" class="page type-page entry"> 
 
      <h1>Demo</h1> 
 
      <div id="bodyContent" class="mw-body-content"> 
 
      <div id="jump-to-nav" class="mw-jump"> 
 
       <a href="#mw-head">Navigation</a> 
 
      </div> 
 
      </div> 
 
     </article> 
 
     </main> 
 
    </div> 
 

 
    <div id="mw-head"> 
 
     <div id="p-personal" role="navigation" class="" aria-labelledby="p-personal-label"> 
 
     <h3 id="p-personal-label">Box2</h3> 
 
     TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div> 
 

 
     <div id="right-navigation"> 
 
     <div id="p-views" role="navigation" class="vectorTabs" aria-labelledby="p-views-label"> 
 
      <h3 id="p-views-label">Ansichten</h3> 
 
      <ul> 
 
      <li id="ca-view" class="selected"> 
 
      </li> 
 
      <li id="ca-ve-edit"> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

出典

2016-04-14 Otaku Kyon

あなたのCSSの残りの部分を提供してくださいか、または手伝いをしてください/ codepen。誰かがあなたを助ける最も簡単な方法は、問題を再現することです。 – theblindprophet

@theblindprophetすでに完全なCSSコードが埋め込まれています。意識的に、私はCSSを追加していませんでした。もし私が持っていたら、コードを無効にする必要があります。要素を調べることは、私の意見からはうまくいくかもしれません..他の人に解決する問題が原因ですか？さて私はそれを修正します。 –

.site-内側を画面の容器の中心を整列させるために、このクラスを追加します。代わりpx画素特定のサイズを使用する

.site-inner{ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

出典

2016-04-14 03:42:23

注釈を正しいクラスに適用しましたが、動作していないようです。私は言及した "マージン"属性を追加しようとしましたが、私はウィジェットと記事の間に20ピクセルのギャップを作ることができませんでした。 –

、むしろ%又はemサイズを使用。
body{font-size:**px}（*は現在のディスプレイ/ウィンドウサイズの一部に基づく数値）を設定することによって、emサイズの基礎を設定するCSS @mediaクエリセレクタを持つこともできます。

これはあなたの応答性のレイアウトの基礎を設定し、あなたの内容はそれに応じてスケールします。

拡張性の高いソリューションが必要な場合は、SVGでコンテンツを構築し、SVG要素のルートにmin-widthとmin-heightというプロパティを設定してください。ここで

は、SVGの説明の例です：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="100%" 
    height="100%" 
    viewBox="0 0 1920 1080" 
    style="display:block; min-width:640px; min-height:360px"> 

    ... The rest of your code here ... 

</svg>

上記は（、非常によくスケールしますあなたが見ることができるように、解像度があなたの現在の解像度に基づいておりますが、完全にスケールと小さい上プロポーションを維持しますまたはより大きい）解像度/モニター。

唯一の欠点は、あなたが悪いことではありませんれ、SVGですべてを行う必要がありますということですが、要件はそう述べている場合は問題になることがあります。
あなたが保存し、「Inkscapeの」（無料）のように、SVGエディタを使用して、インタラクティブなコンポーネントを構築し、粗のWebブラウザ-whichであなたのモックアップを見ることができるので利点は、しかし素晴らしいですがの節約しますコード化とは対照的に、すべて手で。

出典

2016-04-14 03:44:52 argon

あなたの提案をありがとう。それを反応的にすることは後で考えなければならない選択肢かもしれませんが、まずはマージンを働かせるべきです。％またはemを使用しても私の問題の適切な解決策にはならないと考えています。あなたの推奨事項を適用しても、彼らは「嫌がらせ」のためにしか使えません。あなたは両方の違いに気付いたことに気付きましたことを祈っています：現在は左右のエッジをチェックしますが、代わりに.site-inner divコンテナをチェックして20ピクセルのギャップ –

CSS：余白を使ってdivコンテナを調整する

答えて

関連する問題