0

私はかなり長い間この問題に苦しんでいます。htmlページ内にメインコンテナを作成しました。このコンテナには、さらに3つのコンテナ（左、中央、右）が含まれています。中央のコンテナには、ユーザーが送信したテキストに基づいて増やすことができるDIVがいくつかあります。中央のコンテナ内でテキスト値が増加しているので、各コンテナ（メイン、右、左、中央）のサイズをコンテンツに合わせて大きくしてほしいのですが、実際には、投稿されたデータはコンテナから出ています。

CSSのすべてのコンテナの絶対位置として位置を使用しています。

それを達成する方法を提案していただけませんか。CSSとJavaScriptのどちらが良いですか？あなたの助けに感謝します。！[以下は私が直面しているスクリーンショットです] [10]

皆さん、以下のhtmlコードとcssを見てください。これは私がやりたいことです。現在、私は適切なコンテナをposition：relativeとして保持しています。したがって、適切なコンテナ内のdivが増加すると、適切なコンテナが拡張されます。中央のコンテナの位置を相対的な位置に保つと、その中のコンテンツに応じて拡張されます。ただし、子コンテナ（左、中央、右）のいずれかが拡張すると、メインコンテナも拡張する必要があるようなものが必要です。CSSを使用してこれを達成する方法はありますか？そうでない場合は、JavaScriptとJQueryを使用してそれを行う方法は？

.wrapper {
  position: relative;
  top:10px;
  width: 100%;
  border: 1px solid black;
}
.left{
  position:absolute;
  top:0px;
  left:0px;
  width: 300px;
  margin: 0 auto;
  background-color:red;
  border: 1px solid black;
}
.middle{
  position:absolute;
  top:0px;
  left:400px;
  width: 300px;
  background-color:blue;
  border: 1px solid black;
}
.right{
  position:relative;
  top:0px;
  width: 300px;
  left:800px;
  background-color:pink;
  border: 1px solid black;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="SampleCSS1.css">
</head>
<body>

<div class="wrapper">
  <div class="left">
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
</div>

<div class="middle">
  <div>div in middle</div><div>div in middle</div><div>div in middle</div>
  <div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div    in middle</div><div>div in middle</div>
  <div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div>
  <div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div>

  </div>

<div class="right">
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>

  </div>

  </div>

  </body>
  </html>

enter code here
4

3 に答える 3

1

position：absoluteを使用するため、コンテナーの高さは常に0になります（ブラウザーによっては、このようなものになります）。

したがって、位置なしでそれを行うことが可能である場合：メインコンテナの場合、および中央のコンテナが他のコンテナよりも常に高い場合は、次のように行うことができます。

<div class="wrapper">
  <div class="main"></div>
  <div class="sub sub-left"></div>
  <div class="sub sub-right"></div>
</div>

.wrapper {
  position: relative;
  width: 960px;
}
.main {
  width: 760px;
  margin: 0 auto;
}
.sub {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.sub-left {
  left: 0;
}
.sub-right {
  right: 0
}

あなたがpositionなしでそれをすることができないとき：すべてのコンテナのために絶対で、それがie7で働く必要があるとき、あなたはjavascriptでそれをしなければなりません。

于 2013-03-04T18:13:22.827 に答える
0

真ん中のテーブルにあるものだけに基づいて、3つのdivすべてを同じ高さに拡張する場合は、Jqueryが必要になると思います。動的データが中央のdivに入力されても、左右のdivが拡張されないことを気にしない場合は、中央のdivにオーバーフローを追加するだけです。

#middlediv {
   overflow:hidden;
)

親コンテナタグがある場合は、それにもオーバーフローを追加する必要があります。

于 2013-03-04T18:02:59.257 に答える
0

css テーブルを使用して、コンテナーの高さを拡張できます。例えば：

あなたのラッパー：

.wrapper{
    display:table-row;
}

3 つの列 (コンテナー):

.container{
    display:table-cell;
}

これにより、各列の高さが常に最も高いものに合わせて拡張されます。

于 2013-03-04T17:09:07.070 に答える