如何将水平卡页脚div设置在其他div的正下方而不是右侧

时间：2017-09-17 19:06:38

标签： html css css3 flexbox

我希望有这样的结构：

enter image description here

但是它不起作用，图像，日期，标题和副标题都可以，但是你知道如何将图像标题放在图像和视图正下方，并保存链接在其他文本下面，具有相同的边距 - 左边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;
  }


}

3 个答案:

答案 0 :(得分：2)

我是通过使用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;
}

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

答案 1 :(得分：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>

答案 2 :(得分：1)

这是我的图像版本。让我知道，如果有任何问题，我已经使用绝对位置作为页脚的位置。

对于CSS的SCSS版本，请参考小提琴，否则请参阅下面的代码段！

JSFiddle Demo

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题