0

2つの固定幅のdiv（左右にフロート）と、表示幅に応じて幅を変更する流動的な中央のdivを使用して3列のレイアウトを作成しようとしています。それらはすべてラッパーdivに含まれています。私がこれを行った方法は、左右に浮かぶ固定幅のdivを作成し、右側のdivが表示される場所を残すために、右マージンのあるラッパーdivに対して相対的に配置される3番目のdivを作成することです。ただし、問題は、流動的なdivにコンテンツがある場合、margin-rightスタイルを無視して、右側のdivをオーバーフローすることです。なぜこれが起こるのですか？1111もそうです

奇妙な理由でgetは事前にフォーマットされています。

コード：

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
4

4 に答える 4

2

フロートされた2つのdivを使用することをお勧めします。

右側に、中央と右側のdivを配置します。

フロートを介して行われるすべて：

HTML：

<div class="left">content for the left</div>
<div class="rightContainer">
  <div class="right">right content</div>
  <div class="middle">middle content</div>
</div>

CSS：

.left {
    float: left;
    width: 100px;
    overflow: hidden;
    min-height: 30px;
    background: red;
}
.rightContainer {
    float: none;
    min-height: 30px;
    overflow: hidden;
    background: yellow;
}
.right {
    float: right;
    width: 100px;
    overflow: hidden;
    min-height: 30px;
    background: blue;
}​
.middle {
    overflow: hidden;
    min-height: 30px;
    background: green;
}

例：

更新：コンテンツに適用：http：//jsfiddle.net/2KXW5/1/

于 2012-08-31T08:49:00.900 に答える
1

word-wrap: break-word;これは、中心流体divのスタイルを指定することで解決できます。

于 2012-08-31T08:47:07.330 に答える
1

ブラウザはワードラップではうまく機能しません。とにかく、私はこのコードがいくつかの助けをもたらすことを願っています：

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
    <div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>  
</div>
于 2012-08-31T08:52:47.157 に答える
0

まず、段落要素はブロックレベルの要素です。詳細については、Googleで検索してください。したがって、他のオブジェクトと重ならないようにする場合は、フロートする必要があります。

したがって、これをヘッダー（または別のファイル-または必要に応じてインライン）に含めます。

<style type="text/css">
p {
   float:left;
}
</style>

次に、divを再配置します。

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
    <div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
于 2012-08-31T08:58:49.160 に答える