Question

我试图找到溢出后图像正下方的按钮。我在溢出和图像方面取得了一些进展，但我正在努力将按钮放在正确的位置。

从this fiddle看，我的确定和后退按钮搞砸了。我希望它们位于图像正下方（即使您调整图像大小或具有不同大小的图像），图像右侧有一个按钮，左侧是另一个按钮。像这样：

enter image description here

目前他们低于图像，但其他一切都是错误的。

HTML

<div class="overflow">
    <img  class="img" src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1">
    <div class="button1">back</div>
    <div class="button2">ok</div>
</div>

CSS

.overflow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
.img {
    position: absolute;
    top: 5%;
    bottom:5%;
    left: 0;
    right: 0;
    max-width:90%;
    max-height:90%;
    margin:auto;
}

.button1{
    position: absolute;
    color: white;
    bottom:5%;
    left: 25%;
}

.button2{
    position: absolute;
    color: white;
    bottom:5%;
    left: 50%;
}

很抱歉没有查看几天的问题。没时间检查你的建议。再一次抱歉。

Answer 1

在图像上使用固定的width并将它们包裹在容器周围。

试试这个：

<强> HTML：

<div id="outter">
    <div id="middle">
        <div id="container">
            <img class="img" src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1" />
            <div style="clear:both;">
                <div class="button1">back</div>
                <div class="button2">ok</div>
            </div>
        </div>
    </div>
</div>

<强> CSS：

#outter {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}
#middle {
    display: table-cell;
    vertical-align: middle;
}
#container {
    text-align: center;
    display: inline-block;
    width: auto;
}
#container img {
    height: 250px;
    width: 250px;
}
.button1 {
    display:inline-block;
}
.button2 {
    margin-left:75%;
    display:inline-block;
}

<强>更新

围绕两个div包裹图片和文字，并使用table和table-cell方法将它们垂直和水平居中。

更改margin-left中的.button2以进一步移动文字。

<强> JSFiddle Demo

在Firefox，Safari和Chrome以及IE9上测试

有关垂直对齐的更多信息 here 。

Answer 2

好的，我认为this是您真正想要的

为了使事情正常工作，您需要先将按钮相对于图像定位。我通过使用一些可能不赞成的<table>来做到这一点，但它完成了工作。很多CSS都可以使用，因为该表负责定位。此解决方案的唯一警告是，您的表必须具有固定的width和height（必须指定它们，但您当然可以通过javascript更改它们）命令您能够将其放置在页面的中心。

HTML：

<div class="overflow">
    <table>
        <tr >
            <td colspan="2">
                <img class="img" src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="button2">ok</div>
            </td>
            <td>
                <div class="button1">back</div>
            </td>
        </tr>
</div>

和CSS：

.overflow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
.img {
    max-width:90%;
    max-height:90%;
}
.button1 {
    color: white;
}
.button2 {
    color: white;
}
table td{
    text-align: center; 
    width: 50%;
}

table{
    position: absolute;
    width: 500px;
    height: 300px;
    left: calc(50% - 500px/2);
    top: calc(50% - 300px/2);
    table-layout: fixed;
}

要记住的重要部分是table-layout: fixed，它允许我们指定单元格的宽度，因此我们可以使它们的大小相等并获得正确的定位。此外，left和top属性是根据您的width和height设置的，因此如果您更改宽度和高度，则必须同时指定这些属性（因为您无法通过calc()）引用CSS属性。

Answer 3

我不确定position: fixed对此有多大帮助，但如果没有它，这是一个很好的解决方案：http://codepen.io/pageaffairs/pen/liAJj

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {background: rgba(0, 0, 0, 0.8);}
.overflow {display: table; margin: 5% auto; text-align: justify; max-width: 90%;}
.overflow:after {content: ""; width: 100%; display: inline-block;}
.overflow img {display: block; margin-bottom: 10px; width: 100%;}
.button1, .button2 {display: inline-block; width: 50%; color: white;}
.button2 {text-align: right;}
</style>
</head>
<body>

<div class="overflow">
    <img  class="img" src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1">
    <div class="button1">back</div>
    <div class="button2">ok</div>
</div>

</body>
</html>

Answer 4

this是否有效？

我所做的就是改变这一点：

.button2{
    position: absolute;
    color: white;
    bottom:5%;
    left: 50%;
}

到此：

.button2{
    position: absolute;
    color: white;
    bottom:5%;
    right: 25%;
}

匹配另一个按钮。

它似乎适当地弯曲，所以我看不出它有什么其他问题。

Answer 5

在这里，我希望这就是你想要的

http://jsfiddle.net/ZchEY/3/

编辑代码：

.button1{
    position: absolute;
    color: white;
    bottom:5%;
    right:8%;
}

.button2{
    position: absolute;
    color: white;
    bottom:5%;
    left: 8%;
}

Answer 6

HTML代码：

<div class="overflow">
    <div id="img"><img src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1"/></div>
    <div id="buttons">
        <div class="item-1">Item 1</div>
        <div class="item-2">Item 2</div>
    </div>
</div>

CSS代码：

.overflow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
#img {
    margin: 0 auto;
    max-width:90%;
    max-height:90%;
    text-align: center;
}

#buttons {
    max-width:70%;
    max-height:90%;
    margin: 20px auto;
    overflow: hidden;
}

#buttons .item-1 {
    color: white;
    width: 50%;
    float: left;
}

#buttons .item-2 {
    color: white;
    width: 50%;
    float: right;
    text-align: right;
}

Answer 7

通过对图像的一些相对定位，它似乎是你想要的。问题是你的按钮无论如何都与img无关。

看看：http://jsfiddle.net/ZchEY/7/

HTML

<div class="overflow">
    <img class="img" src="http://ts4.mm.bing.net/th?id=HN.608050962838388827&pid=15.1">
    <div class="buttons">
        <div class="button1">back</div>
        <div class="button2">ok</div>
    </div>
</div>

CSS

.overflow {
    position: fixed;
    padding: 5% 0 0 5%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    border: 1px solid red;
}
.img {
    position: relative;
    top: 5%;
    bottom:5%;
    left: 0;
    right: 0;
    max-width:90%;
    max-height:90%;
    margin:auto;
}
.buttons {
    padding: 0;
    max-width:90%;
    max-height:90%;
    position: relative;
    top: 0;
}
.button1 {
    position: absolute;
    color: white;
    top: 15%;
    left: 25%;
}
.button2 {
    position: absolute;
    top: 15%;
    right: 25%;
    color: white;
}

图像溢出时图像下方的图像

7 个答案: