0

3 つの列すべてまたは 1 つだけを表示する 3 列のサイトがあります。1 つの列のみを表示する場合、以下の例は表示される列です。このintroラッパーは、このラッパーの左右の列が存在しない場合に拡張する必要がある中央の列です。具体的には、イントロ ラッパーの最初の div です。2 番目の div には静的な画像が含まれており、変更しないでください。

min/max-width を使用しましたが、コンテンツが最大に達することはなく、最小のままです。

.intro はラッパーです。このラッパーの最小幅は 801px で、最大 1200px まで拡大できます。最初の内部 div ( .intro-left) は最小 531 ピクセルで、最大 979 ピクセルまで拡張できます。

誰かが見て、どこが間違っているのか教えてもらえますか?

これが私のコードです。

.intro{
  float:left;
  min-height:200px;
  width:801px;
  padding:10px 0;
}

.intro .intro-right{
  display:inline;
  float:left;
  height:200px;
  width:250px;
  background:#ccc;
}

.intro .intro-right img{
  height:190px;
  width:240px;
  margin:5px 0 0 5px;
  border:1px solid #777;
}

.intro .intro-left{
  display:inline;
  float:left;
  width:531px;
  min-height:200px;
  margin-right:20px;
}

<div class="intro">
  <div class="intro-left">
    <h2><a href="#">Test</a></h2>
    <p>test</p>
  </div>

  <div class="intro-right">
    <a href="#"><img alt="" src="1.jpg"></a>
  </div>
</div>
4

1 に答える 1

0

display:table はあなたの問題を解決します。これがCSSです。テスト中に削除したい変更をいくつか加えました..左のdivをサイズ変更可能にして、実際に動作していることを確認できるようにするなどです。

div.intro {border:2px dotted red;
                min-height: 200px;
                max-width:1200px;
                min-width:801px;
                padding: 10px 0;
                margin:0 auto;
                display:table;

            }
            .intro-right, .intro-left{display:inline-block;vertical-align:top;}

            .intro-right {
                height: 200px;
                width: 250px;
                background: #ccc;
                outline: 2px solid green;
            }

            .intro-right img {
                height: 190px;
                width: 240px;
                margin: 5px 0 0 5px;
                border: 1px solid #777;
            }

            .intro-left {
                width: 531px;
                height: 200px;
                margin-right: 20px;
                outline: 2px solid blue;
                resize:both;
                overflow:auto;
            }
于 2013-01-11T04:09:33.767 に答える