Question

我对css和html相当新，所以我在定位窗口调整大小时保留在该定位中的div时遇到一些麻烦。如果我可以帮助我定位我的网站上的按钮，同时保持静态，因为窗口调整大小会很棒。

这是链接： http://jsfiddle.net/aritro33/B8dLk/4/

注意在调整窗口大小时POST按钮如何移动。我怎么把它固定在身体的边缘？

谢谢！

HTML：

<div class = "header"><span class = "headert" contenteditable = "true">YOUR TITLE:</span></div>
<div class = "body"><span class = "bodyt" contenteditable = "true">And a little more explanation, please!</span></div>
<div class = "buttoncontainer"><a href="#" class="postbutton">Post</a></div>

CSS：

 @import url(http://fonts.googleapis.com/css?family=Oswald:400);


body{
    background-color: #268fd6;
    overflow: hidden;
}

.header{
    background-color: #144c72;
    height: 80px;
    width: 500px;
    margin: 0 auto;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    top: 50px;
}

.headert{
    font-family: 'Oswald';
    font-style: light;
    font-size: 50px;
    position: relative;
    left: 15px;
    top: 5px;
    color: white;
    outline: 0px solid transparent;
}

.body{
    background-color: #2980B9;
    min-height: 70px;
    width: 500px;
    margin: 0 auto;
    position: relative;
    top: 50px;
     overflow: hidden;
     padding: 20px;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;

}

.bodyt{
    color: white;
    font-size: 22px;
    font-family: 'Oswald';
    outline: 0px solid transparent;
    font-style: light;
}

.postbutton {
    background-color:#27AE60;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #27AE60;
    display:inline-block;
    color: white;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    position: relative;
    top: 60px;
    left: 66.5%;
}

.buttoncontainer{
   position: relative;
}

Answer 1

将该按钮放在它上面的div中，然后调整主体以不隐藏溢出。

<div class = "body"><span class = "bodyt" contenteditable = "true">And a little more explanation, please!</span>
  <div class = "buttoncontainer">
  <a href="#" class="postbutton">Post</a>
  </div>
</div>

一旦按钮包含在父体内，它将移动并作为该元素的一部分。您将不得不为您的设计略微调整布局，但一般的解决方案就在这里。

DEMO

Answer 2

试试这个

.wrapper{
    width:500px;
    margin:0 auto;
    position: relative;
}

Answer 3

试试这个：

.buttoncontainer{
width: 500px;
margin: 0 auto;
position: relative;
}

它应该修复它。

这是因为当前div具有自动边距，当您调整窗口大小时，它会更改边距。

当窗口调整大小时，将按钮div保持在静态位置

3 个答案: