0

2 つの列があります。最初の列は画像、2 番目の列は詳細を保持します。

私の問題は、画像が次の行に流れることです

オーバーフローの追加:auto; またはインラインブロック。div.portfolioitems_wrap に私を助けませんでした

リスト http://img577.imageshack.us/img577/7002/screenshot20121204at135.png

メーカー

 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1">first image</div>
 </div>
 <div class="portfolioitems_column2">information of the institute</div>
 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1">first image</div>
 </div>
 <div class="portfolioitems_column2">information of the institute</div>
 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1"><img src="/image/nature.jpg" class="thumbnail" alt="nature" />
 </div>
 </div>
 <div class="portfolioitems_column2">information of the institute
 </div>
 <div class="portfolioitems_wrap">
 <div class="portfolioitems_column1">first image</div>
 </div>
 <div class="portfolioitems_column2">information of the institute</div>
 <div class="clear"></div>

CSS

 div.portfolioitems_wrap{
float: left;
width:100%;
color:#555555;
border-bottom: 1px solid #eee;
height: 1.5em;
margin-bottom: 1em;
}

 div.portfolioitems_column1{
margin-right: 10px;
}
 div.portfolioitems_column2{
float: left;
color:#555555;
width: 300px;
margin-left: -300px;
font-size: 80%;
}

 div.portfolioitems_column1 .thumbnail 
{
    float:left;
    margin-right:20px;
    border:1px solid #979390;
    width:80px;
    margin-bottom: 5px;
}


 div.clear{
clear: both;
}
4

2 に答える 2

0

上記の私のコメントにさらに: http://jsfiddle.net/hp7dY/

これを修正するだけmin-heightで十分なようです

于 2012-12-04T14:20:13.877 に答える
0

DIV 組織が少し混乱しているようで、それが問題を悪化させています。私は、portfolioitems_wrap DIV が両方の列を囲むことになっていると想定しています。とはいえ、問題は、コンテンツに基づいて柔軟にできるようにするのではなく、各テーブル行の高さを固定していることです。

高さを取り除く：1.5em; エントリ from を使用すると、要素を DIV に収めることができます。列要素をインライン ブロックとして表示することも検討してください。

div.portfolioitems_wrap{
    float: left;
    width:100%;
    color:#555555;
    border-bottom: 1px solid #eee;
    // height: 1.5em;
    margin-bottom: 1em;
}   

div.portfolioitems_column1{
    margin-right: 10px;
    display:inline-block;
    width:100px;     
    float:left;
}  

div.portfolioitems_column2{
    color:#555555;
    font-size: 80%;
    display:inline-block;
    width:300px;
    float:left;
}   

div.portfolioitems_column1 .thumbnail  {     
    float:left;     
    border:1px solid #979390;     
    width:80px;     
    margin: 0px 10px 5px 10px;
}    

div.clear{
    clear: both;
}

これは、それをきれいにするために他のいくつかの小さな調整を加えた実用的なフィドルです:

http://jsfiddle.net/72HML/

それが役立つことを願っています。

于 2012-12-04T14:54:26.677 に答える