首页 文章

图像定位/ div高度与显示flex

提问于
浏览 次
0

我喜欢两个盒子类div的定位和proty-content：flex-end但是我想把顶部的img-container div垂直放在上面的剩余空间中，但是我不确定这是否可能，最好没有JavaScript的 .

该布局适用于纵向移动设备 . 也许证明内容不是最好的方法，但我想要一个布局，将表单元素放在屏幕的底部，并将它们很好地隔开，但通过从徽标区域占用空间来响应较小的设备 .

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;    
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    
    /*iPhone 4*/
    height: 480px;
    width:320px;
    /*iPhone 6*/
    /*height: 667px;
    width:375px;*/
    
    background-color: blue;
    border: 1px solid red;
}

.box {
  text-align:center;
    height: auto;
    width: 100%;
    background-color: green;
    border: 1px solid pink;
    margin: 3px;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:20px;
    margin-bottom:20px;
}

.img-container{
  text-align:center;
}

<div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>

<div class="box">
  <input type="text" placeholder="username">
  <br>
  <input type="password" placeholder="password">  
  <br>
  <button>submit</button>
</div>
<div class="box">
    <button>password reset</button>
    <br>
    <button>register</button>
</div>

</div>
html css css3 flexbox

2 回答

  • 1

    您可以只更改一些代码并实现您想要的 .

    小提琴：https://jsfiddle.net/gczcorn0/

    我刚修改你的图像容器是这样的：

    <div class="box clear img-container">
  <img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>

    所以这与下面的方框具有相同的属性 . 然后我假设您不希望图像框上的 background-color 和 border ，所以只需清除这样的css属性：

    .box.clear {
  background-color: transparent;
  border: none;
}

    我不确定你想要它在较小的设备中的行为是什么意思，因为在示例中宽度设置为320px .

    EDIT based on comment:

    这个更新的小提琴显示了您在评论中表达的情况下可以做的事情：https://jsfiddle.net/gczcorn0/2/

    回复于
  • 1

    您也可以在 img-container 上使用 display: flex .

    .flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;    
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;

  /*iPhone 4 */
  height: 480px;
  width:320px;

  /*iPhone 6
  height: 667px;
  width:375px;*/

  background-color: blue;
  border: 1px solid red;
}

.box {
  text-align:center;
  height: auto;
  width: 100%;
  background-color: green;
  border: 1px solid pink;
  margin: 3px;
  padding-top:20px;
  padding-bottom:20px;
  margin-top:20px;
  margin-bottom:20px;
}

.img-container{
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  flex: 1;
}

.img-container img {
  margin: 0 auto;
}

    <div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>

<div class="box">
  <input type="text" placeholder="username">
  <br>
  <input type="password" placeholder="password">  
  <br>
  <button>submit</button>
</div>
<div class="box">
    <button>password reset</button>
    <br>
    <button>register</button>
</div>

</div>
    回复于

相关问题