logo标签列表

如何让horizontal-card-footer div直接显示在其他div下面而不是右边？

htmlcssflexbox
4

我想要这样的结构：

enter image description here

但它没有起作用，图片、日期、标题和副标题都没问题，但是你知道如何将图像标题放在图像正下方，并将查看和保存链接放在其他文本下面，左边距相同为1rem吗？
我这里有一个示例：http://jsfiddle.net/tyyj57gs/6/，问题应该是因为horizontal-card div具有display 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;
  }


}
像这样吗？https://jsfiddle.net/sol_b/Lyt9ne4e/ - sol
你上传的图片就是你想要的最终结果，对吧？我正在为你处理 :) - Matthew Barbara
@ovokuro 我建议你把那个发表为答案。 - Asons
3个回答
2

我通过使用display:inline-block来代替原来的弹性盒子实现了这个。这些部分被分成了两个行。您可以根据需要添加样式。

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;
}

FIDDLE : http://jsfiddle.net/tyyj57gs/9/

2

您可以使用 flexbox 创建所需的布局。

在下面的代码片段中，我已将您的 .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>

0

这是我对图片的版本。如果有任何问题，请告诉我，我已经使用绝对定位来设置页脚的位置。

要查看 CSS 的 SCSS 版本，请参考 fiddle，否则请参考下面的代码片段！

JSFiddle 演示

.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，对吧？我的意思是父容器仍然是普通的。 - Naren Murali
我猜这可能会创建问题，因为它被从流程中取出，例如http://jsfiddle.net/sol_b/3t1t3qxs/1/。 - sol
@ovokuro 如果我理解有误请指正，但是 OP 使用像素来定义图像，所以我认为内容也应该是固定高度的！如果使用 flexbox，那么图像将如何调整大小？？？ - Naren Murali
我不确定OP想要什么，也许他们可以澄清一下。使用flexbox而不是position，我们可以做到这一点--> https://jsfiddle.net/sol_b/8ccvL5b7/1/ - sol
@ovokuro 请在问题评论中标记他们，谢谢！ - Naren Murali
2
我必须在这里同意 @ovokuro 的观点，因为这可以通过现有的 Flexbox 来实现。开始使用绝对定位和固定边框高度来为标题等腾出空间并不是一个好的解决方案，它会防止拥有良好的响应式设计。 - Asons
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接