Question

DEMO： https://jsfiddle.net/sbxbeqfy/

我正在创建一个左侧有文本，右侧有图像的布局。我必须在所有屏幕上将图像放在div的底部。我尝试使用position: absolute和vertical-align: bottom，但这没有帮助。我也尝试了各种方法，但没有帮助。我该怎么办？

默认情况下，图像位于div的顶部：（

<div class="App">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                    <h1>Welcome</h1>
                    <h2>This is the best and there's been no better measure.</h2>
                    <br />
                    <h2>Available on Play Store</h2>
                    <form>
                    <input type="number" class="mobile" />
                    </form>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
                <div class="col-md-4 col-sm-5 mobile">
                    <img src="http://placehold.it/640x480" class="img-responsive">
                </div>
            </div>
        </div>
    </div>
    <div class="NextApp">
        <div class="conainer">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                  The image above is to touch the top of this div in any screen size
                </div>
            </div>
        </div>
    </div>

CSS：

.App {
  padding: 15px 0;
}
.mobile {
  bottom: 0px;
}
.NextApp {
  background-color: #eee;
  padding: 50px 0;
}

Answer 1

您可以在display: flex的父行（添加新课程.specialRow）和align-self: flex-end上使用.mobile将其放在底部。

.App {
  padding: 15px 0;
}

.NextApp {
  background-color: #eee;
  padding: 50px 0;
}

.specialRow {
  display: flex;
}

.mobile {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .specialRow {
    flex-direction: column;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="App">
  <div class="container">
    <div class="row specialRow">
      <div class="col-md-8 col-sm-7">
        <h1>Welcome</h1>
        <h2>This is the best and there's been no better measure. This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.This is the best and there's been no better measure.</h2>
        <br />
        <h2>Available on Play Store</h2>
        <form>
          <input type="number" class="mobile" />
        </form>
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
      <div class="col-md-4 col-sm-5 mobile">
        <img src="http://placehold.it/640x480" class="img-responsive">
      </div>
    </div>
  </div>
</div>
<div class="NextApp">
  <div class="conainer">
    <div class="row">
      <div class="col-md-8 col-sm-7">
        The image above is to touch the top of this div in any screen size
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使用ServiceEventSource（父级）和display: flex（子级）。我为移动视图添加了align-self: flex-end，并为media query添加了一个新类。

请参阅此代码段：

imageBottom

.App {
  padding: 15px 0;
}

.NextApp {
  background-color: #eee;
  padding: 50px 0;
}

.imageBottom {
  display: flex;
}

.mobile {
  align-self: flex-end;
}

@media (max-width: 755px) { 
  .imageBottom {
    display: block;
  }
}

将图像放在DIV的底部

2 个答案: