25

相対的に配置されたコンテナー内に絶対配置されたテキスト ブロックがあります。絶対配置要素がコンテナの右境界を超えています。

問題は、テキストが通常どおりに折り返されないことです。定義されたものに拡張するのではなく、時期尚早に壊れていますmax-width:

観察された動作:

ここに画像の説明を入力

望ましい動作

ここに画像の説明を入力

HTML/CSS ( JSFIDDLE : http://jsfiddle.net/WmcjM/ ):

<style>
.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 100px;
}

.text {
    position: absolute;
    max-width: 150px;
    left: 290px;
    top: 10px;
    background: lightblue;
}
</style>

<div class="container">
    <div class="text">Lorem ipsum dolor sit amet</div>
</div>

注: 目的の動作を実現するように見えるが、私が探しているものとはまったく異なるいくつかの変更には、次のものがあります。

  • on を定義min-width: 150pxし.textます (テキストは 1 つの単語にすぎない可能性があり、コンテナーを大きくしたくありません)
  • ポジショニング.text。ではなくドキュメントに相対的.container(ブラウザのサイズが変更された場合でも、コンテナの横に表示する必要があります)
4

4 に答える 4

13

position: relative;.text で使用してみてください

編集:また、カスタムの最大幅を持つ絶対配置ラッパー内に配置します

CSS 

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.wrap_text {
    position: absolute;
    max-width: 200px;
    top: 10px;
}

.text {
    position: relative;
    left: 290px;
    background: lightblue;
}

そしてHTML：

<div class="container">
    <div class="wrap_text">
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>
于 2013-02-11T19:48:51.797 に答える
6

絶対位置を相対位置に変更し、絶対位置要素で .text をラップします。

http://jsfiddle.net/WmcjM/4/

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.text {
    position: relative;
    /*min-width: 200px;*/
    left: 290px;
    background: lightblue;
}

.wrap {
    position: absolute;
    max-width: 200px;
    top: 10px;
}
于 2013-02-11T19:49:05.837 に答える