CSS - 水平方向のリストの動的幅（リストのリストのリストで）

Question

私はこのレイアウトを実現しようとしています：

私が得ることができる最も近いがこれです：

問題が小さく（以上ハッシュタグが付加されている）場合には列が取得される

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
.project_thumbnail_info { 
 
    margin: 10px 0px 0px 0px; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.project_thumbnail_info li { 
 
    margin: 0 15px 0 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    float: left; 
 
    clear: right; 
 
} 
 

 
.project_thumbnail_info li ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    float: left; 
 
} 
 

 
.project_thumbnail_info li ul li { 
 
    float: left; 
 
    clear: both; 
 
} 
 

 
.project_thumbnail_info_avatar { 
 
    width: 35px; 
 
    height: 35px; 
 
} 
 

 
.project_thumbnail_info_hashtags li { 
 
    float: left!important; 
 
    clear: right!important; 
 
    padding: 0px 8px 0px 0px; 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
h2 { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h2 a { 
 
    color: #000; 
 
}

<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6"> 
 
    <img src="http://lorempixel.com/400/200/" class="img-responsive" /> 
 
    <ul class="project_thumbnail_info"> 
 
    <li class="project_thumbnail_info_avatar"> 
 
     <img src="http://lorempixel.com/400/400/" class="img-responsive"> 
 
    </li> 
 
    <li class="project_thumbnail_info_detail"> 
 
     <ul> 
 
     <li> 
 
      <h2><a href="#">dem hinterfragen</a></h2> 
 
     </li> 
 
     <li> 
 
      <ul class="project_thumbnail_info_hashtags"> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

、タイトルとハッシュタグ部屋は残っていないので、飛び降りている。これは私が欲しいものではありませんが、私は解決策を見つけることができません。

私があなたを助けてくれることを願っています。

Answer 1

display:flexを使用して、必要なものを達成できます。私はすべてのあなたのフロートを削除し、変更した

インラインブロック（ハッシュタグ）とフレックス（メインULコンテナ）

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
.project_thumbnail_info { 
 
    margin: 10px 0px 0px 0px; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: flex; 
 
} 
 

 
.project_thumbnail_info_detail { 
 
    flex-grow: 1; 
 
} 
 

 
.project_thumbnail_info li { 
 
    margin: 0 15px 0 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.project_thumbnail_info li ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.project_thumbnail_info_avatar { 
 
    width: 35px; 
 
    height: 35px; 
 
} 
 

 
.project_thumbnail_info_hashtags li { 
 
    padding: 0px 8px 0px 0px; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
h2 { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h2 a { 
 
    color: #000; 
 
}

<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6"> 
 
    <img src="http://lorempixel.com/400/200/" class="img-responsive" /> 
 
    <ul class="project_thumbnail_info"> 
 
    <li class="project_thumbnail_info_avatar"> 
 
     <img src="http://lorempixel.com/400/400/" class="img-responsive"> 
 
    </li> 
 
    <li class="project_thumbnail_info_detail"> 
 
     <ul> 
 
     <li> 
 
      <h2><a href="#">dem hinterfragen</a></h2> 
 
     </li> 
 
     <li> 
 
      <ul class="project_thumbnail_info_hashtags"> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

見つけてくださいソリューションの

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
.project_thumbnail_info { 
 
    margin: 10px 0px 0px 0px; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.project_thumbnail_info_detail 
 
{ 
 
    display: inline-block; 
 
    width: 70%; 
 
} 
 
.project_thumbnail_info li { 
 
    margin: 0 15px 0 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    float: left; 
 
    clear: right; 
 
} 
 

 
.project_thumbnail_info li ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    float: left; 
 
} 
 

 
.project_thumbnail_info li ul li { 
 
    float: left; 
 
    clear: both; 
 
} 
 

 
.project_thumbnail_info_avatar { 
 
    width: 35px; 
 
    height: 35px; 
 
} 
 

 
.project_thumbnail_info_hashtags li { 
 
    float: left!important; 
 
    clear: right!important; 
 
    padding: 0px 8px 0px 0px; 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
h2 { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h2 a { 
 
    color: #000; 
 
}

<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6"> 
 
    <img src="http://lorempixel.com/400/200/" class="img-responsive" /> 
 
    <ul class="project_thumbnail_info"> 
 
    <li class="project_thumbnail_info_avatar"> 
 
     <img src="http://lorempixel.com/400/400/" class="img-responsive"> 
 
    </li> 
 
    <li class="project_thumbnail_info_detail"> 
 
     <ul> 
 
     <li> 
 
      <h2><a href="#">dem hinterfragen</a></h2> 
 
     </li> 
 
     <li> 
 
      <ul class="project_thumbnail_info_hashtags"> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">#hashtag</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>