如何在其他 div 下方而不是在右侧获取水平卡页脚 div答案

【问题标题】：How to get the horizontal-card-footer div right below other div and not at right如何在其他 div 下方而不是在右侧获取水平卡页脚 div
【发布时间】：2018-02-26 07:33:48
【问题描述】：

我想要这样的结构：

但它不起作用，图像，日期，标题和副标题都可以，但是你知道如何将图像标题放在图像的正下方，并将视图和链接保存在具有相同边距的其他文本下方 - 左1rem？

我这里有示例：http://jsfiddle.net/tyyj57gs/6/，问题应该是因为水平卡 div 有显示 flex，但我没有成功解决这个问题。

HTML：

<div class="container pb-4">
  <div class="row">
    <div class="col-lg-3">
      <div class="horizontal-card">

        <img src="http://via.placeholder.com/200x100"/>
        <div class="horizontal-card-body">
          <span class="card-text">Date</span>
          <h4 class="card-title">Title</h4>
          <span class="card-text">Subtitle</span>
        </div>
          <div class="horizontal-card-footer">
          <span>Image Title</span>
          <a class="card-text status">#View</a>
          <a class="card-text status">#Save</a>

        </div>


      </div>
      </div>

CSS

.horizontal-card{
  display: flex;
  border:1px solid gray;
  margin-bottom:1rem;
  img{
    width: 200px;
    height: 100px;
    border-bottom: 2px solid red;

  }
  .horizontal-card-body{
    display: flex;
    flex-direction: column;
    margin-left:1rem;
  }


}

【问题讨论】：

喜欢这个？ jsfiddle.net/sol_b/Lyt9ne4e
您上传的图片是您想要的最终结果，对吧？我是为你做的:)
@ovokuro 我建议您将其发布为答案

标签： html css flexbox

【解决方案1】：

我通过使用 display:inline-block 而不是您拥有的弹性框来做到这一点。这些部分分为两个rows。根据需要添加样式。

HTML：

<div class="card">

  <div class="row">
    <div class="innerLeft">
      <img src="http://via.placeholder.com/200x100"/>
    </div>      
    <div class="innerRight">
      <div class="horizontal-card-footer">
        <span class="card-text">Date</span>
        <h4 class="card-title">Title</h4>
        <span class="card-text">Subtitle</span>            
      </div>
    </div> 
  </div>

  <div class="row">
    <div class="innerLeft">
      <p>Image Title</p>          
    </div>
    <div class="innerRight">
      <a class="card-text status">#View</a>
      <a class="card-text status">#Save</a>
    </div>
  </div>

</div>

CSS：

.card {
 display:block;
 width:100%;
 max-width:800px;
}
img {
 width: 100%;
 height: auto;
 border-bottom: 2px solid orange;
}
.innerLeft {
 display:inline-block;
 margin-right:-4px;
 vertical-align:top;
 width:30%;
 text-align:center;
 padding:5px;
}
.innerRight {
 display:inline-block;
 vertical-align:top;
 width:70%;
 text-align:left;
 padding:5px;
}
.card-text {
 display:inline-block;
}

小提琴：http://jsfiddle.net/tyyj57gs/9/

【讨论】：

【解决方案2】：

您可以使用flexbox 创建您想要的布局。

在下面的 sn-p 中，我将您的 .horizontal-card 重组为 .card-left 和 .card-right。

.horizontal-card {
  display: flex;
  border: 1px solid gray;
  margin-bottom: 1rem;
}

.card-left,
.card-right {
  display: flex;
  flex-direction: column;
}

.card-right {
  width: 100%;
}

.card-left span {
  background: orange;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.horizontal-card-body,
.horizontal-card-footer {
  padding-left: 1em;
}

img {
  width: 200px;
  height: 100px;
}

.horizontal-card-footer {
  /* Add to ensure the footer is pinned to the bottom of the card */
  margin-top: auto;
  border-top: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<div class="container pb-4">
  <div class="row">
    <div class="col-lg-3">
      <div class="horizontal-card">

        <div class="card-left">
          <img src="http://via.placeholder.com/200x100" />
          <span>Image Title</span>
        </div>

        <div class="card-right">
          <div class="horizontal-card-body">
            <span class="card-text">Date</span>
            <h4 class="card-title">Title</h4>
            <span class="card-text">Subtitle</span>
          </div>
          <div class="horizontal-card-footer">
            <a class="card-text status">#View</a>
            <a class="card-text status">#Save</a>
          </div>
        </div>

      </div>
    </div>
    <div class="container pb-4">
      <div class="row">
        <div class="col-lg-3">
          <div class="horizontal-card">

            <div class="card-left">
              <img src="http://via.placeholder.com/200x100" />
              <span>Image Title</span>
            </div>

            <div class="card-right">
              <div class="horizontal-card-body">
                <span class="card-text">Date</span>
                <h4 class="card-title">Title</h4>
                <span class="card-text">I am a card with a longer subtitle. I am a card with a longer subtitle. I am a card with a longer subtitle. I am a card with a longer subtitle. </span>
              </div>
              <div class="horizontal-card-footer">
                <a class="card-text status">#View</a>
                <a class="card-text status">#Save</a>
              </div>
            </div>

          </div>
        </div>
        <div class="container pb-4">
          <div class="row">
            <div class="col-lg-3">
              <div class="horizontal-card">

                <div class="card-left">
                  <img src="http://via.placeholder.com/200x100" />
                  <span>Image Title</span>
                </div>

                <div class="card-right">
                  <div class="horizontal-card-body">
                    <span class="card-text">Date</span>
                    <h4 class="card-title">Title</h4>
                    <span class="card-text"></span>
                  </div>
                  <div class="horizontal-card-footer">
                    <a class="card-text status">#View</a>
                    <a class="card-text status">#Save</a>
                  </div>
                </div>

              </div>
            </div>

【讨论】：

【解决方案3】：

这是我的图像版本。如果有任何问题，请告诉我，我使用绝对位置作为页脚位置。

对于 CSS 的 SCSS 版本，请参考 fiddle，否则请参考下面的 sn-p！

JSFiddle Demo

.horizontal-card {
  position: relative;
  display: flex;
  border: 1px solid gray;
  margin-bottom: 1rem;
}
.horizontal-card img {
  width: 200px;
  height: 130px;
  border-bottom: 30px solid orange;
}
.horizontal-card .horizontal-card-body {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
}
.horizontal-card .horizontal-card-footer {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 30px;
  display: flex;
  align-items: center;
}
.horizontal-card .horizontal-card-footer span {
  width: 200px;
  display: inline-block;
}
.horizontal-card .horizontal-card-footer a {
  margin-left: 10px;
}

<div class="container pb-4">
  <div class="row">
    <div class="col-lg-3">
      <div class="horizontal-card">

        <img src="http://via.placeholder.com/200x100" />
        <div class="horizontal-card-body">
          <span class="card-text">Date</span>
          <h4 class="card-title">Title</h4>
          <span class="card-text">Subtitle</span>
        </div>
        <div class="horizontal-card-footer">
          <span>Image Title</span>
          <a class="card-text status">#View</a>
          <a class="card-text status">#Save</a>

        </div>


      </div>
    </div>

【讨论】：

@ovokuro 为什么不混合它，他只对一个容器应用 flex 对吗？我的意思是父容器仍然是正常的
我猜它可能会产生问题，因为它被排除在流程之外，例如jsfiddle.net/sol_b/3t1t3qxs/1
@ovokuro 如果我错了，请纠正我，但 OP 使用像素来定义图像，所以我假设内容也应该是固定高度！如果你使用 flexbox，图像将如何调整大小？？？
我不确定 OP 想要什么，也许他们可以澄清一下。使用 flexbox 代替 position 我们可以做到这一点 --> jsfiddle.net/sol_b/8ccvL5b7/1
我在这里必须同意@ovokuro，因为这可以用现有的 Flexbox 完成，开始使用绝对定位和固定边框高度来补偿为标题等腾出空间是一个非常糟糕的解决方案，并且它会阻止一个良好的响应。