Question

我有一个页面，两个div并排在一个三分之一到三分之三。这些包含在父div中。我的一个div有一个图像，我想做的是能够将这个图像垂直对齐到父div的顶部，中间或底部，其高度由第二个div中的文本量定义。理想情况下，我希望能够在图像或内容中添加一个类来设置对齐。

https://jsfiddle.net/y9mLr5xv/1/

<style type="text/css">
  section {
    padding: 40px 0 40px;
    display: block;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
    font-family: sans-serif;
  }

  .inner {
    width: 95%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-body {
    width: 100%;
    float: left;
    margin: 0;
  }

  .content-a {
    width: 32.7%;
    float: left;
  }

  .content-b {
    width: 62.1%;
    float: left;
    margin-left: 4.2%;
  }

  h3 {
    margin: 0;  
  }
</style>

<section class="main">
  <div class="inner">
    <div class="section-header">
      <div class="content">
        <h1>
          Header here
        </h1>
        <p class="strap">
          Strapline would go here
        </p>
      </div>
    </div>
    <div class="section-body">
  <div class="content-a">
    <img src="http://placehold.it/350x150">
  </div>
  <div class="content-b">
    <h3>
      Title here
    </h3>
    <p>
      A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here.
    </p>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>
      A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here.
    </p>
  </div>
</div>
  </div>
</section>

Answer 1

也许您可以使用display: table-cell

https://stackoverflow.com/a/1636635/3025740

使用html：

<div class="area vertical-top">
  <img src="http://lorempixel.com/300/150/cats">
</div>

<div class="area">
  <p>lorem ipsum...</p>
</div>

和css：

.area {
    background: red;
    display:table-cell;
    vertical-align: top;
}

.vertical-bottom {
      vertical-align: bottom;
}

.vertical-middle {
      vertical-align: middle;
}

Answer 2

使用display: flex

找到解决方案

https://jsfiddle.net/johnthomson92/y9mLr5xv/2/

HTML：

<section class="main">
  <div class="inner">
    <div class="section-header">
      <div class="content">
        <h1>
          Header here
        </h1>
        <p class="strap">
          Strapline would go here
        </p>
      </div>
    </div>
    <div class="section-body">
      <div class="content-a top">
        <img src="http://placehold.it/350x150">
      </div>
      <div class="content-b">
        <h3>
          Title here
        </h3>
        <p>
          A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here.
        </p>
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
        <p>
          A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here.
        </p>
      </div>
    </div>
  </div>
</section>

CSS：

section {
  padding: 40px 0 40px;
  display: block;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
  font-family: sans-serif;
  overflow: hidden;
}

.inner {
  width: 95%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.section-body {
  width: 100%;
  float: left;
  margin: 0;
  display: flex;
  position: relative;
}

.strap {
  margin-bottom: 20px;
}

.content-a {
  width: 32.7%;
  float: left;
  display: flex;
  align-items: flex-start;
}

.top {
  align-items: flex-start;
}

.middle {
  align-items: center;
}

.bottom {
  align-items: flex-end;
}

.content-b {
  width: 62.1%;
  float: left;
  margin-left: 4.2%;
}

p {
  margin-bottom: 0;
}

h3 {
  margin: 0;  
}

img {
  max-width: 100%;
  display: block;
}

Answer 3

试试这可能会帮助您实现目标

//var path = spaceRef.fullPath;
//var gsReference = storage.refFromURL('gs://test.appspot.com')

    <script>
     function showimage() {



         var storageRef = firebase.storage().ref();
         var spaceRef = storageRef.child('sweet_gift/vytcdc.png');
         storageRef.child('sweet_gift/vytcdc.png').getDownloadURL().then(function(url) {
             var test = url;
             alert(url);
             document.querySelector('img').src = test;

         }).catch(function(error) {

         });


     }
    </script>
    <input type="button" value ="view Image" id="viewbtn" onclick="showimage();">
    <img src="test" height="125px" width="200px"/>

在与另一个div内联的div中设置内容的对齐方式

3 个答案: