0

私は最終段階の写真ブログを持っていますが、これは私が苦労している最後の問題です. レイアウトは、右側に固定メニュー バーがあり、右側にコンテンツ フローがあります。ギャラリーページから自分の写真を開いた場合、左右どちらかが（例えば）空き容量の70%を超えないようにリサイズすることになっています。しかし、それだけではありません。また、右側のコンテンツ div の水平方向および垂直方向の中央に配置する必要があります。この時点で、画像が縦向きの場合を除いて、すべてが機能します。

JS をアクティブにしていない数パーセントを満足させるために、CSS だけでこれを達成することは可能ですか? そうでない場合、それは取引のブレーカーではありません。

HTML:

<div id="wrapper">
  <div id="left_column">
  </div>
  <div id="right_column_post">

      <div id="post_container">

        <img src="img.jpg" width="1000" height="750"/>

      </div>

  </div>

</div>

CSS:

#left_column {
    position: fixed;
    top: 0;
    bottom: 0; 
    left: 0;
    z-index:100;
    width: 240px;
    height: 100%;
    overflow: hidden;

}

#right_column_post{
    height: 100%;
    width:auto;
    margin-left:240px;
    position: relative;
}


#post_container {
    width:100%;
    height:100%;
    display: block; 
    vertical-align: middle;
    text-align:center;
}

#post_container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}


#post_container img{
    max-width:70%;
    height:auto;
    display: inline-block;
    vertical-align: middle;
    margin:auto;
    position:relative;
}

これは近いです：http://jsfiddle.net/jcAGj/しかし、そのまま実装するとレイアウトが壊れます。

4

2 に答える 2

0

私はそれを機能させました...ちょっと。私はストリップダウンしたテストページを作成しましたが、動作します:

http://tomiphotography.com/wp-content/themes/Photomi/Test/post-2.html

しかし、メインの WP ページでまったく同じ CSS を使用すると、画像の比率がおかしくなり、画像が中央に配置されません????:

http://tomiphotography.com/?p=176

:(

一部のcssをオーバーライドするWPに何があるか考えていますか?

HTML:

<body>

<div id="wrapper">
  <div id="left_column">
  </div>

  <div id="right_column_post">

      <div id="post_container">

            <img src="http://tomiphotography.com/wp-content/uploads/2013/04/Ruka-viimeinen.jpg"/>


    </div>

  </div>

</div>

</body>

CSS:

 html {
    height: 100%;
    padding:0;
    margin:0;
}

body {
    background-color: #000000;
    height: 100%;
    padding: 0;
    margin: 0;

    background: url(img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wrapper {
    float: left;
    height: 100%;
    width:100%;
    padding:0;
    margin:0;
}


#left_column {
    position: fixed;
    top: 0;
    bottom: 0; 
    left: 0;
    z-index:100;
    width: 240px; 
    height: 100%;
    overflow: hidden; 
    background-color:#ff0000;

}


#right_column_post{
    height: 100%;
    width:auto;
    margin-left:240px;
    position: relative;
}

#post_container  {
  position:fixed !important;
  position:absolute;
  margin:auto;
  text-align:center;
  top:8%;
  right:80px;
  bottom:10%;
  left:320px;
}
#post_container img {
    max-width:100%;
    max-height:100%;    
    padding:4px;
    background-color:#fff;
}
于 2013-04-20T18:18:39.700 に答える