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来实现您想要的。

我删除了你所有的浮动并更改了内联块（hashtags）和 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>

CSS - 水平列表的动态宽度（在列表的列表列表中）

CSS - Dynamic width for horizontal list (in a list of a list of a list)

dynamic

width