divの2つのdivを固定幅と可変幅/可変幅のいずれかに合わせる

Question

固定幅のdiv、Twitterから取得した画像を含む状況、可変幅のユーザーを含むdiv可変長のテキスト。私は何を達成したいことは、次のようなものです：

私はbackground-imageとpadding-leftを持つ単一のdivで、この十分に行うことができます。しかし、私はborder-radiusをimg要素に適用できるようにしたいと考えていますが、これは単にbackground-imageでは不可能です。

を外側のdivに送信すると、途中で私に届きます。 Here's a DEMOとスクリーンショット：

しかし、これは明らかに私が欲しいもの、完全ではありません。

どうすればこの問題を解決できますか？

Answer 1

を掲載して、あなたは—簡略化jsFiddle example受けるもの：

追加ボーナスとして、テキストも垂直方向にセンタリングされています！

HTML：

<div class="logo"> 
    <div class="logo-container"> 
     <img src="http://img.tweetimag.es/i/appsumo_b.png" /> 
    </div> 

    <div class="logo-name"> 
     AppSumo is a really really long title that continues down the page 
    </div> 
</div> 

CSS：

.logo { 
    background-color: #eee; 
    display: table-cell; 
    height: 100px; 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    width: 600px; 
} 

.logo-container { 
    background-color: #fff; 
    border-radius: 10px; 
    left: 10px; 
    position: absolute; 
    top: 10px; 
    width: 75px; 
} 

.logo-name { 
    font: bold 28px/115% Helvetica, Arial, sans-serif; 
    padding-left: 85px; 
} 

Answer 2

画像コンテナ（またはコンテナなしの画像自体）を左に浮かべて、左のものをすべてクリアしてから、テキストを左に浮かべて、右にあるものをすべてクリアすることができます。

.logo-container{ 
    float:left; 
    clear:left; 
} 
.logo-name{ 
    float:left; 
    clear:right; 
} 

余白を使用してテキストの間隔を調整できます。

.logo-name{ 
    float:left; 
    clear:right; 
    margin-top:10px; 
    margin-left:5px; 
} 

Answer 3

このようなものでしょうか？画像過去タイトルテキストをプッシュする左の位置に http://jsfiddle.net/uPPTM/6/

.logo { 
    width:80%; 
    margin:auto; 
    background-color: red; 
} 
.logo-container { 
    border: 1px solid gold; 
    width:73px; 
    height: 73px; 
    display: inline-block; 
    vertical-align:middle; 
} 
.logo-name { 
    display: inline-block; 
} 

Answer 4

使用絶対位置。

http://jsfiddle.net/uPPTM/9/

.logo { width: 50px; } 
.title { 
    position: absolute; 
    top: 0; 
    left: 50px; 
    font-size: 32px; 
    text-align: center; 
} 
img { 
    border: 1px solid gray; 
    border-radius: 15px; 
} 

 

<div class="logo"> 
    <div class="logo-container"> 
     <img src="http://img.tweetimag.es/i/appsumo_b.png"> 
    </div> 
    <div class="logo-name">AppSumo</div> 
</div>