css - divのCSS処理オーバーフロー

Question

2 div に問題があります。

2 つの div を持つ 100% 幅のボックスです。左はサムネイル画像です。右は説明です。

私の問題は、ブラウザ ウィンドウのサイズを変更すると、データの説明がサムネイルの下に表示されることです。min-width を追加しましたが、結果はありません。多分私は間違った場所にそれを追加しています。

どうもありがとう。

http://jsfiddle.net/NzX9e/

Answer 1

ウィンドウをスケーリングする際に適切に機能させたい場合は、% 値と固定幅を混在させないでください。div は、親によって与えられたすべてのスペースを自然に占有します。したがって、ここで本当に必要なことは、不要なスタイルとマークアップをすべて削除することです。

この特定のケースの場合: http://jsfiddle.net/NzX9e/7/

基本的に、img を含む div をフロートし、その横にある他のすべてのスタイルを削除します (画像の横に少し余裕を持たせるためにパディングを追加しました)。

.docBox {
   border: solid 1px #006633;
   margin: 10px 0px 0px 10px;
   overflow: hidden;   <- this acts like a clear to keep the floated div in the parent
}

.previewImgBox {
   height: 70px;
   width: 50px;
   text-align: center;
   float: left;
}

.previewData {
    padding: 0 0 0 60px;
    'all the styles you had here are not needed and cause your problem'
}

すべてのマークアップとスタイルを調べてクリーンアップするつもりはありませんでした。必要以上に多くのものがあることを指摘しただけです。おそらく、あなたが達成しようとしていることの2倍以上です。少ないほうがいいですね。:)

Answer 2

jsFiddle: http://jsfiddle.net/NzX9e/11/

変更点は次のとおりです。

margin-top を削除します。

.previewImgBox .thumb {
    /*margin-top: 5px;*/
}

高さを追加:

.docBox {
    height: 70px;
    border: solid 1px #006633;
    margin: 10px 0px 0px 10px;
}

float:left を追加:

.previewData {
    height: 70px;
    min-width: 95%;
    width: 95%;
    /*border: solid 1px #00CC33;*/
    overflow: auto;
    display: inline-block;
    float:left;
}

.previewImgBox {
    height: 70px;
    width: 50px;
    /*border: solid 1px #00CC33;*/
    text-align: center;
    display: inline-block;
    float:left;
}

Answer 3

95% の幅を 94% に変更したところ、うまくいきました。より良い解決策があるかどうかを確認するために、質問を開いたままにしてください。