Question

我刚刚开始关注网页设计，我正在努力实现一些简单但我不确定实现这一目标的最佳方法。

我只是想做的是将按钮彼此相邻放置，而不管它前面的文本长度如何。 IE如下面的屏幕截图所示我有4列带有段落和按钮。

enter image description here

Answer 1

div {
    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-align-items: center;
}
ul {
    display: -webkit-flex;
}

li {
    -webkit-flex: 1;
}

<强> http://jsfiddle.net/pTsW4/85/

browser support

Answer 2

http://jsfiddle.net/pTsW4/87/

* { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    box-sizing: border-box;  
 }


ul {
    margin: 0;
    display:table;
}

li {
    display:table-cell;
    width:30%;
    padding: 20px 20px 40px 20px;
    position: relative;
    border: 1px solid #000;
}

button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

将'ul'和table-cell的显示表添加到子'li'是为了确保相同的高度。添加40px的填充底部为按钮提供空间，然后按钮绝对位于'li'的底部。

Answer 3

不确定支持多大的flexbox。我会选择单独的div或jQuery在所有（相对）列上应用equal height的解决方案，然后将按钮放在底部（绝对）。

Answer 4

在父容器上使用diff -u99 /tmp/file{1,2} --- /tmp/file1 2015-05-31 11:02:03.407463963 +0200 +++ /tmp/file2 2015-05-31 11:02:03.407463963 +0200 @@ -1,22 +1,22 @@ server { listen 80; - root /somepath/somewhere; - server_name example.com; + root '/some other path/elsewhere'; + server_name sample2.com; client_max_body_size 20m; client_body_timeout 120s; location / { try_files /public/router.php =404; fastcgi_split_path_info ^(.+?\.php)(/.*)$; - fastcgi_pass 127.0.0.1:9000; + fastcgi_pass 127.0.0.1:9001; fastcgi_index router.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include /etc/nginx/fastcgi_params; } location /assets { try_files /app/$uri =404; } }以确保所有块具有相同的高度。然后将display: flex;绝对定位于<button>和bottom。通过x向左移动-50％按钮的宽度来居中。

http://codepen.io/anon/pen/jPyLGK

left

ul {
  font-family: verdana, sans-serif;
  display: flex;
  list-style: none;
  justify-content: space-between;
  width: 600px;
}

li{
  background-color: #eeeef0;
  border-radius: 10px;
  box-shadow: 0 0 5px #666;
  flex-grow: 3;
  flex-shrink: 1;
  margin: 10px;
  padding: 0 10px 50px;
  position: relative;
  text-align: center;
}

li p {
  text-align: left;
}

li button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

Answer 5

尝试在单独的div中添加按钮：

<div><p>Text 1</p></div>
<div><p>Text 2</p></div>
<div><p>Text 3</p></div>
<div><p>Text 4</p></div>
<div>...buttons...</div>

然后用css定位div。

Answer 6

JSFiddle demo

    <tr>
        <td> Funny Hello Images</td>
        <td> Funny Hello Images</td>
        <td> Funny Hello Images</td>
        <td> Funny Hello Images</td>
    </tr>
    <tr>
        <td>Find the best Hello images, greetings and pictures here. Browse our great collection of hello pictures and choose your favourite to send to a friend.</td>
        <td> Share an image on Facebook by clicking the button below the graphic, or copying and pasting the link.</td>
        <td>Share an image on Facebook by clicking the button below the graphic, or copying and pasting the link.</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td> <button>button1</button></td>
        <td> <button>button2</button></td>
        <td> <button>button3</button></td>
        <td> <button>button4</button></td>
    </tr>
</table>

CSS：

table td { 
    table-layout:fixed;
  width:20%;
  overflow:hidden;
    word-wrap:break-word;
}

更新了链接

如何将按钮放在彼此旁边

6 个答案: