Question

我希望内嵌显示图像，但是它们不是垂直显示的，而是水平滚动条不会出现。如何在不定义精确宽度的情况下使屏幕可滚动，如何在没有明确高度的情况下将图像格式化为垂直小于屏幕？没有js技巧。 THX

<section class="project-section">
<ul class="list-inline">
    <li>
        <article class="project-data">
            <h1>@Model.CurrentTitleText()</h1>
            <p>@Model.CurrentDescriptionText()</p>
        </article>
    </li>
    @foreach (var elem in Model.ProjectInclude)
    {
        <li>
            <article class="project-item-container fit-container">
                <img class="fit-container" src="@Url.Action("Render", "Image", new { file = elem.Media.FileName })/" />
                @if (!string.IsNullOrEmpty(elem.Media.CurrentTitleText()))
                {
                    <h6>@elem.Media.CurrentTitleText()</h6>
                }
                @if (!string.IsNullOrEmpty(elem.Media.CurrentDescriptionText()))
                {
                    <p>@elem.Media.CurrentDescriptionText()</p>
                }
            </article>
        </li>
    }
</ul>

的CSS：

.project-section {
    padding-top: 50px;
    padding-bottom: 50px;
    max-height: 100%;
}

.fit-container {
    max-width: 100%;
    max-height: 100%;
}

.project-itemlist {
    max-height: 100%;
}

.project-item-container {
    max-height: 100%;
}

Answer 1

您必须将列表显示为内联：

CSS：

 .list-inline li{

   display:inline-block;

  }

Answer 2

我制作了codepen并嘲笑了你的HTML。当我这样做时，它显示正确。我建议你检查以确保正在加载bootstrap。如果正确加载引导程序，list-inline类已设置为display: inline-block。

<section class="project-section">
  <ul class="list-inline">
    <li>
      <article class="project-data">
        <h1>Inline Images</h1>
        <p>Lorem ipsum</p>
      </article>
    </li>
    <li>
      <article class="project-item-container fit-container">
        <img class="fit-container" src="http://www.placehold.it/200x200" />
        <h6>Sample text</h6>
        <p>Lorem ipsum blah blah blah</p>
      </article>
    </li>

    <li>
      <article class="project-item-container fit-container">
        <img class="fit-container" src="http://www.placehold.it/200x200" />
        <h6>Sample text</h6>
        <p>Lorem ipsum blah blah blah</p>
      </article>
    </li>

    <li>
      <article class="project-item-container fit-container">
        <img class="fit-container" src="http://www.placehold.it/200x200" />
        <h6>Sample text</h6>
        <p>Lorem ipsum blah blah blah</p>
      </article>
    </li>
  </ul>

.project-section {
    padding-top: 50px;
    padding-bottom: 50px;
    max-height: 100%;
}

.fit-container {
    max-width: 100%;
    max-height: 100%;
}

.project-itemlist {
    max-height: 100%;
}

.project-item-container {
    max-height: 100%;
}

以列表内联显示图像

2 个答案: