来自不同div的中心按钮

时间：2016-07-14 00:19:36

标签： html css button

我对样式有疑问：

我想对齐来自不同div的按钮，这些按钮都包含在包装器div中：

<div wrapper>
  <div 1> Image Text... (button1) </div>
  <div 2> Image Text... (button2) </div>
  <div 3> Image Text... (button3) </div>
</div>

每个子div中的文本长度不同，但我需要按钮1 2和3在同一高度。

作为参考（以及我要查看的实际问题）：

http://www.maf-swiss.org/fliege-mit/#mitarbeiter_werden （只需向下滚动一下，3张图片就是孩子div开始的地方，文字和按钮在下面）

正如你可以看到按钮只是在文本后面，我尝试了很多东西，但我似乎总是只引用子div，而不是包装div。

我是否需要在子div中使用绝对位置，以便第一个相对定位是包装div中的位置？ （如果这有意义，否则忽略这一点：D）

这是否只能使用CSS实现，还是需要更改该部分的布局？

编辑：经过进一步调查，我意识到问题有点复杂：

＆＃13;
＆＃13; 
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container {
  display: flex;
}

.container > div {
  width: 200px;
}

.content {
  padding: 6% 8%;
}

.boxButton {
  text-align: center;
}

.image {
  margin-left: auto;
  margin-right: auto;
}
＆＃13; 
<div class="container">
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src="http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg">
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

在阅读了flexboxes的教程之后，我明白为什么它现在看起来像这样。是否有一种方法使用flexbox使内容包装器中的文本立即出现在图像div之后，但按钮仍位于容器的底部？

我可以在contentWrapper中更改或添加div，但是它周围的布局是固定的。

5 个答案:

答案 0 :(得分：1)

更新

您修改了自己的问题，因此我更新了我的代码段。原则仍然与我原来的答案相同;你只需要将样式应用到正确的div。

＆＃13;
＆＃13; 
/* Begin changes */
.box, .contentWrapper {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  display: flex;
}

.contentWrapper {
  flex-grow: 1;
  justify-content: space-between;
}
/* End changes */

.container {
  display: flex;
}

.container > div {
  width: 200px;
}

.content {
  padding: 6% 8%;
}

.boxButton {
  text-align: center;
}

.image {
  margin-left: auto;
  margin-right: auto;
}
＆＃13; 
<div class="container">
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src="http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg">
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

原始答案

如果您只需要支持现代浏览器，那么就有一个flexbox解决方案。

＆＃13;
＆＃13; 
.box {
  /* The important stuff */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Not necessary for you; I did this to make the snippet look like your example. */
.container {
  display: flex;
}

.container > div {
  width: 200px;
}
＆＃13; 
<div class="container">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
    <div>
      <button>Button</button>
    </div>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
    <div>
      <button>Button</button>
    </div>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div>
      <button>Button</button>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

重要的是让每个.box包含两个元素。在这种情况下，我将文本放在<p>中，将按钮放在<div>中。然后，使用display: flex。 justify-content: space-between将<p>拉向顶部，<div>拉向底部。

答案 1 :(得分：1)

更新了布局：

        
  •         div“container”：水平定向的flexbox。         
                  
    •                 div“box”：垂直方向的flexbox。作为容器的孩子，其水平扩展与其兄弟姐妹一样多。                 
                            
      •                         div“image”：列横幅。                     
        •                 
                      
                            
      •                         div“content”：水平定向的flexbox。作为盒子的孩子，被扩展到剩余的高度。                         
                                      
        •                                 div“contentWrapper”：垂直方向的flexbox。作为内容的孩子，可扩展到最大宽度。它的子项位于线条之间的空间，文本后面的文本和底部的按钮保持不变。                                 
                                                
          •                                         p：列文本。                                     
            •                                 
                                          
                                                
          •                                         p“boxButton”：列按钮。                                     
            •                                 
                                      
          •                         
                            
        •                 
                  
      •         
        

说明：

要对齐按钮，请不要使用百分比单位来填充内容。而是使用这样的东西：

.content {
  padding: 10px 13px ;
}

现在您将看到另一个问题，文本和按钮最终位于底部。要更改它，请删除：

.box {
  justify-content: space-between;
}
.container > div {
  width: 200px;
}

然后添加：

.box {
/*...*/
  -webkit-flex-grow: 1 ;
  flex-grow: 1 ;
  -webkit-flex-basis: 0 ;
  flex-basis: 0 ;
}
.content {
  padding: 10px 13px ;
  -webkit-flex-grow: 1 ;
  flex-grow: 1 ;
  display: -webkit-flex;
  display: flex;
}
.contentWrapper {
  -webkit-flex-grow: 1 ;
  flex-grow: 1 ;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between ;
  justify-content: space-between ;
}

在Firefox，Chrome和Edge中运行良好。

.box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-grow: 1 ;
  flex-grow: 1 ;
  -webkit-flex-basis: 0 ;
  flex-basis: 0 ;
}


.container {
  display: -webkit-flex;
  display: flex;
}

.content {
  padding: 10px 13px ;
  -webkit-flex-grow: 1 ;
  flex-grow: 1 ;
  display: -webkit-flex;
  display: flex;
}

.contentWrapper {
  -webkit-flex-grow: 1 ;
  flex-grow: 1 ;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between ;
  justify-content: space-between ;
}

.boxButton {
  text-align: center;
}

.image {
  margin-left: auto;
  margin-right: auto;
}
<div class="container">
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus. Sed ut convallis lorem, non tincidunt sapien.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien est, tempus eget aliquet nec, suscipit vitae lectus.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="image">
      <img src="http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg">
    </div>
    <div class="content">
      <div class="contentWrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="boxButton">
          <button>Button</button>
        </p>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

绝对定位可能是一个很好的方法，因为所有这些元素都是相同的高度（按钮和按钮后面的文本行）。只需在这些元素周围添加一个容器div。 

wrapper {
  postition: relative; 
  padding-bottom: 150px; 
}
container {
  position:absolute; 
  bottom: 40px; 
}

另一个选项是在按钮之前设置段落标记的最小高度，因此按钮上方的元素都是相同的高度。

答案 3 :(得分：0)

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="col-md-3 text-center"><a href="#" class="btn btn-info" role="button">Link Button</a></div>
<div class="col-md-3 text-center"><button type="button" class="btn btn-info">Button</button></div>
<div class="col-md-3 text-center"><input type="button" class="btn btn-info" value="Input Button"></div>
<div class="col-md-3 text-center"><input type="submit" class="btn btn-info" value="Submit Button"></div>
</body>
</html>

答案 4 :(得分：0)

  

只需将此css添加到您的按钮即可   

button{
 bottom: -40px
    position: relative;}

相关问题
最新问题