3

私はdivsお互いの中に2つ持っています。1#outsideつには が5px borderあり、2 つ目#insideにはコンテンツが含まれています。それが理にかなっていれば、境界を効果的に破り、2つのブラケットのように見えるように、上下#insideを重ねたいと思います。#outside

HTML

 <div id='outside'>
      <div id='inside'>
           <h1>Sample header</h1>
           <p>Sample copy</p>
      </div> <!-- inside -->
 </div> <!-- outside -->

CSS

 #outside {
      border: 5px solid #000;
      padding: 5px;
 }

#inside div を outside div の上に移動する方法がよくわかりません。アドバイスがあれば助かります!

4

4 に答える 4

1

内側に負のマージンを追加..

概念：

#inside {
    width:   110%;
    height:  110%;
    margin-top: -10%;
    margin-left: -10%;
}

または外側position: relative;を作り、内側position: absolute;をtop: -10px; left: -10px;

于 2012-11-20T09:07:10.170 に答える
1

positionこれで、このデザインに慣れることができます

このように

#outside {
      border: 5px solid #000;
      padding: 5px;
  position:relative;
 }

#inside{
background:red;
  position:absolute;
  top:-10px;
    left:10px;
  right:10px;
}

デモ1

デモ2

于 2012-11-20T09:19:20.033 に答える
1

http://jsbin.com/enabeb/1/edit

<div class="outer"> 
    <div class="inner"></div>
  </div>

.outer{
  height:400px;
  width:400px;
  background:#DDD;
  border:8px solid #333;
}
.inner{
  height:416px;
  margin:-8px auto 0 auto;
  width:380px;
  background:#DDD;
}

これはあなたが求めたものですが、あなたがやろうとしていることを行うための最良の方法だとは思いません.

于 2012-11-20T09:12:57.927 に答える
0

私の電話 (および数人の友人) では、負のマージンが正しく処理されません。position: 内側の div の絶対位置と、適切なサイズ/パディング/境界線が、チェックインしたすべてのブラウザーで、デスクトップ、電話、およびタブレットで正しく機能します。

于 2018-07-02T22:17:27.177 に答える